Foundation Grid System
Foundation grid system is 12 columns.
If you don't need 12 columns, you can merge some columns to create columns with larger widths.
Foundation's grid system is responsive. Columns will automatically resize based on the screen size. On large screens, it may be three columns; on small screens, it may be three single columns arranged in order.
grid columns
The Foundation grid system has three column types:
.small(mobile).medium(Tablet device).large(Computer devices: Laptop, Desktop)
The above classes can be combined to create more flexible layouts.
Basic grid structure
The following is a basic Foundation grid structure example:
Example
<div class="small|medium|large-num columns"></div>
</div>
<div class="row">
<div class="small|medium|large-num columns"></div>
<div class="small|medium|large-num columns"></div>
<div class="small|medium|large-num columns"></div>
</div>
<div class="row">
...
</div>
First, create a row (<div
class="row">). This is a horizontal vertical column. Then add instructions for the number of columns.small-num, medium-numandlarge-numclass. Note: the number of columns
nummust add up to 12:
Example
<div class="small-12 columns">.small-12 yellow</div>
</div>
<div class="row">
<div class="small-8 columns">.small-8 beige</div>
<div class="small-4 columns">.small-4 gray</div>
</div>
<div class="row">
<div class="large-9 small-8 columns">.small-8 .large-9 pink</div>
<div class="large-3 small-4 columns">.small-4 .large-3 orange</div>
</div>
Try it Yourself »
In the example, the <div> class of the first row is.small-12, this creates 12 columns (100% width).
The second row creates two columns,.small-4with a width of 33.3%,.small-8with a width of 66.6%.
In the third row, we added two additional columns (.large-3and.large-9). This means that on large screen sizes, the columns become 25% (.large-3) and 75% (.large-9) ratio. At the same time, we also specified the ratio of columns on small screens as 33% (.small-4) and 66% (.small-8). This combination approach is very helpful for how content displays on different screens.
grid options
The following table summarizes the specifications of the Foundation grid system across multiple devices:
| small devices Phones (<40.0625em (640px)) |
medium devices Tablets (>=40.0625em (640px)) |
large devices Laptops & Desktops (>=64.0625em (1025px)) |
|
|---|---|---|---|
| grid behavior | Always horizontal | Starts collapsed, horizontal above the breakpoint | Starts collapsed, horizontal above the breakpoint |
| class prefix | .small-* | .medium-* | .large-* |
| number of classes | 12 | 12 | 12 |
| nestable | Yes | Yes | Yes |
| offset | Yes | Yes | Yes |
| column ordering | Yes | Yes | Yes |
Widescreen
grid max(.row) The width is 62.5rem. On wide screens, when the width is greater than 62.5rem, columns won't span the page width, even if the width is set to 100%. But you can reset max-width via CSS:
If you use the default max-width, but want the background color to span the entire page width, you can use.rowto wrap the entire container and specify the background color you need:
Example
<div class="row">
<div class="small-6 columns" style="background-color:yellow;">.small-6</div>
<div class="small-6 columns" style="background-color:pink;">.small-6</div>
</div>
</div>
Try it Yourself »