Foundation Grid Examples

Below we have collected some common examples of grids.

Three equal columns

This example demonstrates how to create three equal columns (33.3%/33.3%/33.3%), displaying three columns on medium and large devices, and automatically stacking on small devices:

Three Unequal Columns

This example demonstrates how to create three unequal columns (25%/50%/25%), displaying three columns on medium and large devices, and automatically stacking on small devices:

Two equal columns

This example demonstrates how to create two equal columns (50%/50%), where the column ratio is always 50%/50% on small, medium, and large devices:

Two Unequal Columns

This example demonstrates how to create two unequal columns (33.3%/66.6%), where the column ratio is always 33.3%/66.6% on small, medium, and large devices:

Change Column Order

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

Nested columns

You can use nested grids (columns inside columns):

Mixed: mobile, desktop devices

The Foundation grid system has three columns:.small-*(phone),.medium-*(Tablet), and.large-*(desktop devices). These classes can be dynamically combined to make the layout more flexible:

Tip:Each class can be scaled up. If you want the width to be the same on small and large screen devices, you can set the specified.small-*。

Mixed: mobile, tablet, and desktop devices

Centered columns

Column centering can be used.small-centeredclass. Medium and large devices can inherit the centering from small devices, but you need to set the centering class on large devices..large-centered 。

Column offset

You can use.large-offset-*(or.small-offset-*) class moves the column to the right. The number of columns for the left margin is controlled by the * sign:

Incomplete columns

If the total number of columns in a row is not 12, Foundation will automatically float the last column to the right and use blank space to fill the remaining columns.

Optional.endclass is used to float the element in the last column to the left:

Widescreen

Grid (.row) The maximum size (max-width) is 62.5rem. On wide-screen devices, the size may be greater than 62.5rem, so the columns cannot fully 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 needs to span the entire page, then you use it on the container element.rowClasses, and specify the background color you need: