The best Foundation Grid Examples Tutorial In 2024, In this tutorial you can learn Three equal columns,Three unequal column,Two equal columns,Two unequal columns,Modify the order of columns,Nested Column,Mixed: mobile, desktop,,Mixed: mobile, tablet and desktop devices,The middle column,Column Offset,Incomplete column,Widescreen,

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: