Grid System
Our grid system is composed of 8 flexible columns with a gutter between columns of 30px. We apply border-box so that the border and padding is included in the width of the grid columns.
Grid sizes
Size 1 of 1
1 / 1
Size 1 of 2
1 / 2
1 / 2
Size 1 of 3
1 / 3
1 / 3
1 / 3
Size 1 of 4
1 / 4
1 / 4
1 / 4
1 / 4
Size 1 of 8
1 / 8
1 / 8
1 / 8
1 / 8
1 / 8
1 / 8
1 / 8
1 / 8
When using the grid, wrap the columns using a line and use lastUnit for the last column. Refer to OOCSS base classes to learn more about the grid classes.
This example applies to the other ratios we support: 1/1, 1/2, 1/3, 1/4, and 1/8
Grid gutter
Our grid columns have a 15px padding on either side that results in a 30px gutter between columns and a 15px gutter on the grid edges. Even though our columns are fluid, the gutter remains constant.
1 / 3
1 / 3
1 / 3
Mixed grids
The grid layout is easily extended by nesting and mixing different column sizes.
1 / 8
7 / 8
3 / 4
1 / 4
1 / 3
1 / 2
1 / 2
When nesting grids use the group class to eliminate gutters on the parent element of the columns that are being nested.
It provides a padding-less container for nested columns and subsequently, helps avoid the indentation and side-padding issues otherwise seen on nested columns with unit and lastUnit parent classes.
Wherever possible, limit nesting grids to 2 levels deep. Anything more than that would require the use of nopadding on grid columns or units for correct grid alignment and indentation.
Responsive columns
Our different column sizes automatically change dimensions once they reach certain breakpoints. To illustrate, resize your browser window and you will see the grid columns change size.
The following table shows the media-query breakpoints.
| Breakpoints | |||
|---|---|---|---|
| Grids | 960px or more | Between 960px and 640px | 640px or less |
size1of8 | 12.5% | 50% | 50% |
size1of4, size2of8 | 25% | 100% | 100% |
size1of3 | 33.33% | 100% | 100% |
size3of8 | 37.5% | 100% | 100% |
size1of2, size2of4, size4of8 | 50% | 50% | 100% |
size5of8 | 62.5% | 100% | 100% |
size2of3 | 66.67% | 100% | 100% |
size3of4, size6of8 | 75% | 100% | 100% |
size7of8 | 87.5% | 100% | 100% |
size1of1, size2of2, size3of3, size4of4, size8of8 | 100% | 100% | 100% |
Use nochange with size1of2 and size1of3 for halves and thirds at all breakpoints. | |||