Grid System

Grid sizes Grid gutter Mixed grids Responsive columns

Our grid system is composed of 12 flexible columns with a gutter between columns of 20px. We apply border-box so that the border and padding is included in the width of the grid columns.

Grid sizes

Sizes 1 of 1

1/1

Sizes 1 of 2

1/2

1/2

Sizes 1 of 3

1/3

1/3

1/3

Sizes 1 of 4

1/4

1/4

1/4

1/4

    <div class="unit size2of3">
    h4>1/2</h4>
    </div>
  
    <button class="important-btn"
    disabled>
    Important</button>
  
    <button class="primary-btn"
    disabled>
    Primary</button>
  
    <button class="danger-btn"
    disabled>
    Danger</button>
Note

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/3, 1/6, 1/8, and 1/12

Grid gutter

Our grid columns have a 60px padding on either side that results in a 30px gutter between columns and a 20px gutter on the grid edges for the Web, 40px padding on both side for tablet and 20px padding on both sides for mobile. Even though our columns are fluid, the gutter remains constant.

Sizes 1 of 3

1/3

1/3

1/3

Mixed gutter

The grid layout is easily extended by nesting and mixing different column sizes.

Sizes 1 of 3

1/3

1/3

1/3

1/3

    <div class="pagination">
  
        <a href="#">First</a> 
          
        <a href="#">1</a> 
        <a href="#" class="active">2</a> 
        <a href="#">3</a> 
        <a href="#">4</a> 
        <a href="#">5</a> 
  
        <a href="#">Last</a> 
  
  
    </div>
Note

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 1366px or More Btw 1366px and 1024px Btw 1024px and 768px Btw 768px and 390px
Size 1 of 12 23.5% 32.5% 48.5% 100%