Grid
Create powerful multi-device layouts quickly and easily with the 12-column, nestable Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.
Predefined HTML Classes
These are examples of different ways to use the Foundation Grid. Foundation uses box-sizing: border-box so that borders and padding do not affect the overall width of the columns, making the math dead-simple. Since Foundation is mobile-first, we'll stack content by default. You do have access to an entirely separate small grid to use up to the 768px breakpoint. This means you can create some pretty complex layouts and even drop columns if you want.
<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>
Infinitely Nest
The grid allows for nesting down as far as you'd like, though at a certain point it will get absurd. You can use this nesting to create quite complex layouts, as well as some other tricks like form layouts or visual elements.
<div class="row">
<div class="small-8 columns">8
<div class="row">
<div class="small-8 columns">8 Nested
<div class="row">
<div class="small-8 columns">8 Nested Again</div>
<div class="small-4 columns">4</div>
</div>
</div>
<div class="small-4 columns">4</div>
</div>
</div>
<div class="small-4 columns">4</div>
</div>
Offsets
Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like .large-offset-1 and .small-offset-3 to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't ever offset a full-width column.
<div class="row"> <div class="large-1 columns">1</div> <div class="large-11 columns">11</div> </div> <div class="row"> <div class="large-1 columns">1</div> <div class="large-10 large-offset-1 columns">10, offset 1</div> </div> <div class="row"> <div class="large-1 columns">1</div> <div class="large-9 large-offset-2 columns">9, offset 2</div> </div> <div class="row"> <div class="large-1 columns">1</div> <div class="large-8 large-offset-3 columns">8, offset 3</div> </div>
Centered Columns
Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element, itself. This is accomplished by adding a class of large-centered or small-centered depending on which breakpoint you want the columns to center on. Small versions will carry through all breakpoints if not overridden by a large version. You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered.
<div class="row"> <div class="small-3 small-centered columns">3 centered</div> </div> <div class="row"> <div class="small-6 large-centered columns">6 centered</div> </div> <div class="row"> <div class="small-9 small-centered large-uncentered columns">9 centered</div> </div> <div class="row"> <div class="small-11 small-centered columns">11 centered</div> </div>
Source Ordering
Using these source ordering classes, you can shift columns around between our breakpoints. This means you can have a sub-nav on the left on large displays, but go below on small ones. .push-# is the syntax you'll use.
<div class="row"> <div class="small-2 push-10 columns">2</div> <div class="small-10 pull-2 columns">10, last</div> </div> <div class="row"> <div class="small-3 push-9 columns">3</div> <div class="small-9 pull-3 columns">9, last</div> </div> <div class="row"> <div class="small-4 push-8 columns">4</div> <div class="small-8 pull-4 columns">8, last</div> </div> <div class="row"> <div class="small-5 push-7 columns">5</div> <div class="small-7 pull-5 columns">5, last</div> </div> <div class="row"> <div class="small-6 push-6 columns">6</div> <div class="small-6 pull-6 columns">6, last</div> </div>
Small Grid
As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid.
<div class="row"> <div class="small-2 columns">2</div> <div class="small-10 columns">10, last</div> </div> <div class="row"> <div class="small-3 columns">3</div> <div class="small-9 columns">9, last</div> </div>