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.
1 / 1
1 / 2
1 / 2
1 / 3
1 / 4
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
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.
The grid layout is easily extended by nesting and mixing different column sizes.
7 / 8
3 / 4
When nesting grids use the group class to eliminate gutters on the parent element of the columns that are being nested.
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.
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.
The group class is used when columns are nested inside of grids and is applied to the parent wrapper of the nested columns.
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.
Looks like your browser is blocking pop-up windows.Learn how to enable them.