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
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
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
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
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
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: