Foundation Grid System
Foundation uses a flexible 12-column grid system built with Flexbox that makes it easy to create responsive layouts.
Basic Grid Structure
Live Preview: Basic Grid
6 columns
6 columns
4 columns
4 columns
4 columns
Foundation Code:
<!-- Basic Grid --> <div class="grid-x grid-margin-x"> <div class="cell small-6">6 columns</div> <div class="cell small-6">6 columns</div> </div> <!-- Three Column Grid --> <div class="grid-x grid-margin-x"> <div class="cell small-4">4 columns</div> <div class="cell small-4">4 columns</div> <div class="cell small-4">4 columns</div> </div>
Responsive Grid
Live Preview: Responsive Grid
Full on mobile, 8 columns on medium+
Full on mobile, 4 columns on medium+
Foundation Code:
<div class="grid-x grid-margin-x"> <div class="cell small-12 medium-8">Full on mobile, 8 columns on medium+</div> <div class="cell small-12 medium-4">Full on mobile, 4 columns on medium+</div> </div>
Grid with Gutters
Live Preview: Grid Margins
With gutter
With gutter
With gutter
Foundation Code:
<!-- With margin --> <div class="grid-x grid-margin-x"> <div class="cell small-4">With gutter</div> <div class="cell small-4">With gutter</div> <div class="cell small-4">With gutter</div> </div> <!-- Without margin --> <div class="grid-x"> <div class="cell small-4">No gutter</div> <div class="cell small-4">No gutter</div> <div class="cell small-4">No gutter</div> </div>
Grid Nesting
Live Preview: Nested Grid
Main column
Nested 6
Nested 6
Sidebar
Foundation Code:
<div class="grid-x grid-margin-x">
<div class="cell small-8">
Main column
<div class="grid-x grid-margin-x">
<div class="cell small-6">Nested 6</div>
<div class="cell small-6">Nested 6</div>
</div>
</div>
<div class="cell small-4">Sidebar</div>
</div>Grid Alignment
Live Preview: Vertical Alignment
Vertically centered
Vertically centered
Foundation Code:
<!-- Vertical alignment --> <div class="grid-x grid-margin-x align-middle" style="height: 100px;"> <div class="cell small-4">Vertically centered</div> <div class="cell small-4">Vertically centered</div> </div> <!-- Horizontal alignment --> <div class="grid-x grid-margin-x align-center"> <div class="cell small-4">Horizontally centered</div> </div>
Grid Breakpoints
| Breakpoint | Class Prefix | Width |
|---|---|---|
| Small | .small- | 0px - 639px |
| Medium | .medium- | 640px - 1023px |
| Large | .large- | 1024px+ |
Up next: Foundation Typography
