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:

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:

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%:

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%:

Modify the order of columns

By using .small|medium|large-push-* and .small|medium|large-pull-* class to modify the order of the columns:

Nested Column

You can use nested grids (column insert column):

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-* .

Mixed: mobile, tablet and desktop devices

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 .

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:

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:

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:

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: