12 column grid
This grid system is perfect for mobile screens and desktops. Columns are built using percentages, and will expand or decrease in size to fit within the outer div container. Columns are designed to wrap underneath (beginning with the far right column) once the columns are too small for normal viewing. This break point can be manually controlled using CSS.
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
col1
Writing the code
If you are looking for a two-column grid, insert the desired column class numbers (col1 — col12). Combinations of 12 are necessary to keep the grid intact.
Code Example
Grid examples
column 1 (col4)
column 2 (col8)
Grid Definitions
- onerow
Container around grid.
- col1 - col12
Columns classes which goes from col1 to col12. They can be combined within .onerow up to 12.
- end
It has to be added to the last column of each row or otherwise the last column wraps. The .end class removes the 3% margin-right from last element.