Grid

The Grid

To lay out pages, Solid provides a 12-column, fluid and responsive grid system. To start a new grid, create a div with a .clearfix class. Then, add columns using .xs-col-n (n = 1 through 12) and set them beside each other using a .col class to float each column individually:

.col .xs-col-3
.col .xs-col-4
.col .xs-col-5
  <div class="clearfix">
  <div class="col xs-col-3 xs-border">.col .xs-col-3</div>
  <div class="col xs-col-4 xs-border">.col .xs-col-4</div>
  <div class="col xs-col-5 xs-border">.col .xs-col-5</div>
</div>

Columns Are for Layout

When using Solid, column classes should, generally, only be used on container elements in html (such as div or section). It's bad practice to apply fluid grid-based widths directly to elements such as form fields, headers and images. Similarly, avoid applying visual styles directly to a column element. Instead, nest your content within the column and apply styling there.

Nesting Columns

Solid's grid is relative to its parent, meaning each column can also hold another 12-column grid inside of it. Additionally, if the parent column is being floated, there is no need to add the .clearfix class to that column when nesting another grid inside of it:

.col .xs-col-6

.col .xs-col-4
.col .xs-col-4
.col .xs-col-4

.col .xs-col-6

.col .xs-col-4
.col .xs-col-4
.col .xs-col-4
  <div class="clearfix">
  <div class="col xs-col-6 xs-border">
    <p>.col .xs-col-6</p>
    <div class="col xs-col-4 fill-yellow">.col .xs-col-4</div>
    <div class="col xs-col-4 fill-yellow">.col .xs-col-4</div>
    <div class="col xs-col-4 fill-yellow">.col .xs-col-4</div>
  </div>
  <div class="col xs-col-6 xs-border">
    <p>.col .xs-col-6</p>
    <div class="col xs-col-4 fill-yellow">.col .xs-col-4</div>
    <div class="col xs-col-4 fill-yellow">.col .xs-col-4</div>
    <div class="col xs-col-4 fill-yellow">.col .xs-col-4</div>
  </div>
</div>

Gutters (automatic)

To get consistent gutters between columns, add Solid's .gutters class to the parent container. Note that nested grids will not receive gutters unless the class is applied to their parent column.

.col
.col
.col
.col
.col
<div class="clearfix gutters">
  <div class="col xs-col-4">
    <div class="xs-border">.col</div>
  </div>
  <div class="col xs-col-4">
    <div class="xs-border">.col</div>
  </div>
  <div class="col xs-col-4">
    <div class="col xs-col-4 xs-border">.col</div>
    <div class="col xs-col-4 xs-border">.col</div>
    <div class="col xs-col-4 xs-border">.col</div>
  </div>
</div>

Gutters (manual)

Use Solid's padding utility classes to manually space your grid columns (not margins, as that will break the grid). Keep in mind that visual styling should be applied to nested elements only, and not the columns themselves:

.col .xs-col-3 .xs-pr1
.col .xs-col-4 .xs-pr2
.col .xs-col-5
<div class="clearfix">
  <div class="col xs-col-3 xs-pr1">
    <div class="xs-border">.col .xs-col-3 .xs-pr1</div>
  </div>
  <div class="col xs-col-4 xs-pr2">
    <div class="xs-border">.col .xs-col-4 .xs-pr2</div>
  </div>
  <div class="col xs-col-5">
    <div class="xs-border">.col .xs-col-5</div>
  </div>
</div>

Column Offsets

Use the .offset-n class (from 1-11) to offset a column div. Each step is one column width. So, for example, .xs-offset-1 moves a column to the right by one column width, then .xs-offset-2 moves it to the right by two column widths, and so on.

.xs-col-8 .xs-offset-2
.xs-col-3 .xs-offset-1
.xs-col-3 .xs-offset-2
<div class="clearfix">
  <div class="col xs-col-8 xs-offset-2 xs-border">.xs-col-8 .xs-offset-2</div>
  <div class="col xs-col-3 xs-offset-1 xs-border">.xs-col-3 .xs-offset-1</div>
  <div class="col xs-col-3 xs-offset-2 xs-border">.xs-col-3 .xs-offset-2</div>
</div>

Responsive Grid

The responsive grid is implemented by adding breakpoint prefixes to the column classes (for each breakpoint needing layout adjustment). For example, if a div should take up the full width at all breakpoints, use .xs-col-12. Then, if that same div needs to take up half the width at the medium breakpoint and 3 columns at the largest breakpoint, add .md-col-6 and .lg-col-3. Resize your browser to see the full effect below:

.xs-col-12

.sm-col-12

.md-col-6

.lg-col-3

.xs-col-12

.sm-col-12

.md-col-6

.lg-col-3

.xs-col-12

.sm-col-12

.md-col-6

.lg-col-3

.xs-col-12

.sm-col-12

.md-col-6

.lg-col-3

  <div class="clearfix">
  <div class="col xs-col-12 md-col-6 lg-col-3 xs-border">
   <p class="xs-block sm-hide">.xs-col-12</p>
   <p class="xs-hide sm-block md-hide">.sm-col-12</p>
   <p class="xs-hide md-block lg-hide">.md-col-6</p>
   <p class="xs-hide lg-block">.lg-col-3</p>
  </div>
  <div class="col xs-col-12 md-col-6 lg-col-3 xs-border">
   <p class="xs-block sm-hide">.xs-col-12</p>
   <p class="xs-hide sm-block md-hide">.sm-col-12</p>
   <p class="xs-hide md-block lg-hide">.md-col-6</p>
   <p class="xs-hide lg-block">.lg-col-3</p>
  </div>
  <div class="col xs-col-12 md-col-6 lg-col-3 xs-border">
   <p class="xs-block sm-hide">.xs-col-12</p>
   <p class="xs-hide sm-block md-hide">.sm-col-12</p>
   <p class="xs-hide md-block lg-hide">.md-col-6</p>
   <p class="xs-hide lg-block">.lg-col-3</p>
  </div>
  <div class="col xs-col-12 md-col-6 lg-col-3 xs-border">
   <p class="xs-block sm-hide">.xs-col-12</p>
   <p class="xs-hide sm-block md-hide">.sm-col-12</p>
   <p class="xs-hide md-block lg-hide">.md-col-6</p>
   <p class="xs-hide lg-block">.lg-col-3</p>
  </div>
</div>