Grid System
We have created a flexible grid system based on % widths and faux column classes, which gives us a powerful structural tool. For instance a class of size1of4 suggests 1 column (25%) of a possible 4 columns in a row. Here are some class combinations:
By wrapping the columns in a div with a class of grid and applying an extra class of grid-col to the columns, we create natural margins between columns. Here are some class combinations:
Reducing Grid Margin
Adding a class of ".half-gutter" to the ".grid" div reduces the grids margins by half
Floated Columns
You can use a mixture of both floated left and right elements in a grid
Responsive to Screen Size
Replacing .left with .left-col or .right with .right-col will cause the grid to drop its float and set the width of the column to 100% for tablet and mobile viewports. When you resize the browser window compare the below grid to the previous grid.
Specific classes to set column sizes on small screen devices. The example below shows a 4 column grid that when viewed on small screens becomes a 2 column grid
Pushing Columns
Use a class of .push[]of[] to push columns to the right. This saves you from creating columns in the grid that you don't need.