Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.
Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add <div>s with a .col class within that row. Specify the widths of each column with the .small-n, .medium-n, and large-n classes, where n represents a number of columns.
The UI-Toolkit is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.
<div class="grid-example">
<div class="row">
<div class="small-4 large-8 col"></div>
<div class="small-4 large-8 col"></div>
<div class="small-12 large-8 col"></div>
</div>
<div class="row">
<div class="large-6 col"></div>
<div class="large-12 col"></div>
<div class="large-6 col"></div>
</div>
<div class="row">
<div class="small-12 large-4 col"></div>
<div class="small-12 large-16 col"></div>
<div class="small-24 large-4 col"></div>
</div>
<div class="row">
<div class="small-6 col"></div>
<div class="small-18 col"></div>
</div>
<div class="row">
<div class="large-8 col"></div>
<div class="large-16 col"></div>
</div>
<div class="row">
<div class="small-12 large-10 col"></div>
<div class="small-12 large-14 col"></div>
</div>
<div class="row">
<div class="large-12 col"></div>
<div class="large-12 col"></div>
</div>
</div>
Note that, by default, a .row element will occupy the entire width of its parent. In the event that your grid-layout has no parent, you may use the .grid-container class to constrain the width of your grid.
<div class="grid-container grid-example">
<div class="row">
<div class="small-4 large-8 col"></div>
<div class="small-8 large-8 col"></div>
<div class="small-12 large-8 col"></div>
</div>
</div>
The construction of our grid is such that the exterior columns will not have any gutters on their outward facing sides. This is to say that the left- and right-most columns will not have any additional spacing between them and their containers.
<div class="bg-off-white">
<div class="row grid-spacing-example ">
<div class="small-8 col"></div>
<div class="small-8 col"></div>
<div class="small-8 col"></div>
</div>
</div>
As such, it is the responsibility of a grid's container class to supply appropriate spacing between the grid elements and their neighbors in the UI. It is recommended that this be implemented using the various padding utility-classes available.
For example, below, we use the .padding-medium class to apply spacing around our grid.
<div class="bg-off-white padding-medium">
<div class="row grid-spacing-example">
<div class="small-8 col"></div>
<div class="small-8 col"></div>
<div class="small-8 col"></div>
</div>
</div>
In other contexts, we could use a variety of other padding-classes for a similar effect, but with different measurements.
Another quality of the construction of our grid is that the column itself is actually intended to act as a wrapper around sub-elements rather than being the element itself. This can be seen quite clearly when demonstrating columns with a background-color.
<div class="bg-off-white padding-medium">
<div class="row grid-fill-example">
<div class="small-8 col cell-props"></div>
<div class="small-8 col cell-props"></div>
<div class="small-8 col cell-props"></div>
</div>
</div>
In the example above, the .cell-props class applies a background-color and a border. Because it is being applied directly to the column itself rather than to a child, the grid does not appear to be correctly spaced.
In the example below, we fix this by applying the .cell-props class to a child of a column element.
<div class="bg-off-white padding-medium">
<div class="row grid-fill-example">
<div class="small-8 col">
<div class="cell-props"></div>
</div>
<div class="small-8 col">
<div class="cell-props"></div>
</div>
<div class="small-8 col">
<div class="cell-props"></div>
</div>
</div>
</div>
Note that throughout this page, we apply special CSS to better visually illustrate our examples. In these examples, sub-elements such as the ones described above do not exist.
Small grids expand to large screens easier than large grids cram into small screens.
<div class="grid-example">
<div class="row">
<div class="small-4 col"></div>
<div class="small-20 col"></div>
</div>
<div class="row">
<div class="small-6 col"></div>
<div class="small-18 col"></div>
</div>
</div>
Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.
<div class="grid-example">
<div class="row">
<div class="small-8 medium-4 col"></div>
<div class="small-16 medium-20 col"></div>
</div>
<div class="row">
<div class="medium-6 col"></div>
<div class="medium-18 col"></div>
</div>
</div>
You can nest the grids indefinitely, though at a certain point it will get absurd.
<div class="grid-example">
<div class="row">
<div class="small-16 col">
<div class="row">
<div class="small-16 col">
<div class="row">
<div class="small-16 col"></div>
<div class="small-8 col"></div>
</div>
</div>
<div class="small-8 col"></div>
</div>
</div>
<div class="small-8 col"></div>
</div>
</div>
Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.
<div class="grid-example">
<div class="row">
<div class="large-2 col"></div>
<div class="large-22 col"></div>
</div>
<div class="row">
<div class="large-2 col"></div>
<div class="large-22 large-offset-2 col"></div>
</div>
<div class="row">
<div class="large-2 col"></div>
<div class="large-18 large-offset-4 col"></div>
</div>
<div class="row">
<div class="large-2 col"></div>
<div class="large-16 large-offset-6 col"></div>
</div>
</div>
In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of .end in order to override that behavior.
<div class="grid-example">
<div class="row">
<div class="medium-6 col"></div>
<div class="medium-6 col"></div>
<div class="medium-6 col"></div>
</div>
<div class="row">
<div class="medium-6 col"></div>
<div class="medium-6 col"></div>
<div class="medium-6 col end"></div>
</div>
</div>
The .collapse class lets you remove column gutters (padding).
<div class="grid-example">
<div class="row collapse">
<div class="small-12 col"></div>
<div class="small-12 col"></div>
</div>
</div>
There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your .row element. Example removes the gutter at the large breakpoint and then adds the gutter to columns at medium and small.
<div class="grid-example">
<div class="row medium-uncollapse large-collapse">
<div class="small-12 col"></div>
<div class="small-12 col"></div>
</div>
</div>
Center your columns by adding a class of .small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a .large-centered class. To uncenter on large screens use .large-uncentered.
<div class="grid-example">
<div class="row">
<div class="small-6 small-centered col"></div>
</div>
<div class="row">
<div class="small-12 large-centered col"></div>
</div>
<div class="row">
<div class="small-18 small-centered large-uncentered col"></div>
</div>
<div class="row">
<div class="small-22 small-centered col"></div>
</div>
</div>
Using these source ordering classes, you can shift columns around between breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. .medium-push-n, large-push-n (where n represents a number of columns) is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.
<div class="grid-example">
<div class="row">
<div class="small-20 small-push-4 col"></div>
<div class="small-4 small-pull-20 col"></div>
</div>
<div class="row">
<div class="large-18 large-push-6 col"></div>
<div class="large-6 large-pull-18 col"></div>
</div>
<div class="row">
<div class="large-16 large-push-8 col"></div>
<div class="large-8 large-pull-16 col"></div>
</div>
<div class="row">
<div class="small-10 small-push-14 medium-14 medium-push-10 col"></div>
<div class="small-14 small-pull-10 medium-10 medium-pull-14 col"></div>
</div>
<div class="row">
<div class="medium-12 medium-push-12 col"></div>
<div class="medium-12 medium-pull-12 col"></div>
</div>
</div>
The use of .col corresponds to an upgrade of the UI-Toolkit released with
version 1.8.2. Prior to that version, the .column and .columns class were
available in its place.
The only difference between these two systems is the grid that they support.
The newer .col class supports a 24-column grid, whereas .column and
.columns support the older 12-column grid.
The .column and .columns classes (and the 12-column grid) are still
supported at this time, with full support for all grid-mechanisms described
above. Users are encouraged to not rely on them, though, as these classes will
be deprecated in a future release.
<div class="grid-example">
<div class="row">
<div class="small-2 large-4 columns"></div>
<div class="small-4 large-4 columns"></div>
<div class="small-6 large-4 columns"></div>
</div>
<div class="row">
<div class="large-3 columns"></div>
<div class="large-6 columns"></div>
<div class="large-3 columns"></div>
</div>
<div class="row">
<div class="small-6 large-2 columns"></div>
<div class="small-6 large-8 columns"></div>
<div class="small-12 large-2 columns"></div>
</div>
<div class="row">
<div class="small-3 columns"></div>
<div class="small-9 columns"></div>
</div>
<div class="row">
<div class="large-4 columns"></div>
<div class="large-8 columns"></div>
</div>
<div class="row">
<div class="small-6 large-5 columns"></div>
<div class="small-6 large-7 columns"></div>
</div>
<div class="row">
<div class="large-6 columns"></div>
<div class="large-6 columns"></div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.