Foundation Grid Examples
Below we have collected some examples of common grid.
Three equal columns
This example demonstrates how to create three equal columns (33.3% / 33.3% / 33.3%), showing three columns on the medium and large-scale equipment, automatic stacking on small devices:
Examples
<Div class = "medium-4 columns" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
<Div class = "medium-4 columns" style = "background-color: pink;">
<P> .medium-4 </ p>
</ Div>
<Div class = "medium-4 columns" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
</ Div>
Three unequal column
This example demonstrates how to create three unequal column (25% / 50% / 25%), showing three columns on the medium and large-scale equipment, automatic stacking on small devices:
Examples
<Div class = "medium-3 columns" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
<Div class = "medium-6 columns" style = "background-color: pink;">
<P> .medium-6 </ p>
</ Div>
<Div class = "medium-3 columns" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
</ Div>
Two equal columns
This example demonstrates how to create two equal columns (50% / 50%), the proportion of small, medium and large equipment is always above 50% / 50%:
Examples
<Div class = "small-6 columns" style = "background-color: yellow;">
<P> .small-6 </ p>
</ Div>
<Div class = "small-6 columns" style = "background-color: pink;">
<P> .small-6 </ p>
</ Div>
</ Div>
Two unequal columns
This example demonstrates how to create two unequal columns (33.3% / 66.6%), the proportion of small, medium and large equipment is always above 33.3% / 66.6%:
Examples
<Div class = "small-8 columns" style = "background-color: yellow;">
<P> .small-8 </ p>
</ Div>
<Div class = "small-4 columns" style = "background-color: pink;">
<P> .small-4 </ p>
</ Div>
</ Div>
Modify the order of columns
By using .small|medium|large-push-*
and .small|medium|large-pull-*
class to modify the order of the columns:
Examples
<Div class = "small-4 small-8-push columns" style = "background-color: yellow;">
<P> .small-4 .small- 8-push </ p>
</ Div>
<Div class = "small-8 small-4-pull columns" style = "background-color: pink;">
<P> .small-8 .small- 4-pull </ p>
</ Div>
</ Div>
Nested Column
You can use nested grids (column insert column):
Examples
<Div class = "small-8 columns"> .small-8
<Div class = "row">
<Div class = "small-8 columns"> .small-8 Nested
<Div class = "row">
<Div class = "small-8 columns"> .small-8 Nested Again </ div>
<Div class = "small-4 columns"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "small-4 columns"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "small-4 columns"> .small-4 </ div>
</ Div>
Mixed: mobile, desktop,
Foundation grid system has three columns: .small-*
(cell phone), .medium-*
(flat), and .large-*
(desktop). These classes can be dynamically used in combination, make the layout more flexible:
Tip: Each class can be enlarged, if you want the width of the small and large screen device can be set as specified .small-*
.
Examples
<Div class = "small-6 large-8 columns"> .small-6 .large-8 </ div>
<Div class = "small-6 large-4 columns"> .small-6 .large-4 </ div>
</ Div>
<Div class = "row">
<Div class = "small-2 large-4 columns"> .small-2 .large-2 </ div>
<Div class = "small-4 large-4 columns"> .small-4 .large-2 </ div>
<Div class = "small-6 large-4 columns"> .small-6 .large-2 </ div>
</ Div>
<Div class = "row">
<Div class = "small-3 large-5 columns"> .small-3 .large-5 </ div>
<Div class = "small-9 large-7 columns"> .small-9 .large-7 </ div>
</ Div>
Mixed: mobile, tablet and desktop devices
Examples
<Div class = "medium-6 large-8 columns"> .medium-6 .large-8 </ div>
<Div class = "medium-6 large-4 columns"> .medium-6 .large-4 </ div>
</ Div>
<Div class = "row">
<Div class = "small-4 medium-3 large-7 columns"> .small-4 .medium-3 .large-7 </ div>
<Div class = "small-4 medium-6 large-3 columns"> .small-4 .medium-6 .large-3 </ div>
<Div class = "small-4 medium-3 large-2 columns"> .small-4 .medium-3 .large-2 </ div>
</ Div>
The middle column
You can use the center column .small-centered
class. Medium and large equipment can be inherited centered small devices, but you need to set the class is centered on large equipment .large-centered
.
Examples
<Div class = "small-4 small-centered columns"> small-4 small-centered </ div>
</ Div>
<Div class = "row">
<Div class = "small-6 small-centered columns"> small-6 small-centered </ div>
</ Div>
<Div class = "row">
<Div class = "small-6 large-centered columns"> small-6 large-centered </ div>
</ Div>
<Div class = "row">
<Div class = "small-8 small-centered large-uncentered columns"> small-8 small-centered large-uncentered </ div>
</ Div>
<Div class = "row">
<Div class = "small-10 small-centered columns"> small-10 small-centered </ div>
</ Div>
Column Offset
You can use .large-offset-*
(or .small-offset-*
) class, set the column to the right. The number of columns on the left margin of control using an asterisk:
Examples
<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>
Incomplete column
If the column number of the row and not 12, Foundation will automatically be the last one to the right float, and a blank to fill in the remaining columns.
Options .end
element category for the last one set to the left float:
Examples
<Div class = "medium-3 columns"> .medium-3 </ div>
<Div class = "medium-3 columns"> .medium-3 </ div>
<Div class = "medium-3 columns"> .medium-3 </ div>
</ Div>
<Div class = "row">
<Div class = "medium-3 columns"> .medium-3 </ div>
<Div class = "medium-3 columns"> .medium-3 </ div>
<Div class = "medium-3 columns end"> .medium-3 .end </ div>
</ Div>
Widescreen
Grid ( .row
) Maximum Size (max-width) is 62.5rem. On Widescreen size may be larger than 62.5rem, this column will not be complete fill the page, even if the width is set to 100%. But we can set a new max-width via CSS:
Examples
.row {
max-width: 100%;
}
</ Style>
If you want to use the default max-width, but the background color of inter entire page, then you use on the container element .row
class, and you need to specify a background color:
Examples
<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>