A SUIT component for a CSS grid. The grid makes use of inline-block and box-sizing to provide features that float-based layouts cannot.

N.B. This component relies on particular dimensions being applied to cells in the grid via other classes. For example, SUIT dimensions or the SUIT Grid Layouts extension.

Read more about SUIT's design principles.

• Bower: bower install --save suit-grid
• Download: zip
• Git: git clone https://github.com/necolas/suit-grid

• Fluid layout.
• Intelligent cell wrapping.
• Horizontal centering of cells.
• Custom vertical alignment of cells (top, bottom, or middle).
• Cell width is controlled independently of grid gutter.
• Infinite nesting.
• Built-in redundancy.

A simple grid is easy to create. A grid container can have any number of cells. Each cell can be directly or indirectly styled to control their width and alignment.

<div class="Grid">
    <div class="Grid-cell u-size1of2"></div>
    <div class="Grid-cell u-size1of2"></div>
    <div class="Grid-cell u-size1of3"></div>
    <div class="Grid-cell u-size1of3"></div>
</div>

All cells within a grid can be centered by adding the Grid--center class to the grid container:

<div class="Grid Grid--center">
    <div class="Grid-cell u-size1of3"></div>
    <div class="Grid-cell u-size1of3"></div>
</div>

Or individual cells can be centered on their own line by adding the Grid-cell--center class to a cell:

<div class="Grid">
    <div class="Grid-cell u-size1of2"></div>
    <div class="Grid-cell u-size1of2"></div>
    <div class="Grid-cell Grid--center u-size3of4"></div>
</div>

The core grid component includes no gutters by default.

You may want to install or create a skin that adds gutters to the grid. This is the technique used to create gutters:

/* Grid gutters: 10px */

.Grid {
    margin: 0 -5px;
}

.Grid-cell {
    padding: 0 5px;
}

• Google Chrome (latest)
• Opera (latest)
• Firefox 4+
• Safari 5+
• Internet Explorer 8+