Foundation grid instance

Foundation grid instance

Below we've collected some common examples of grids.

Three equal columns

This example shows how to create three equal columns (33.3%/33.3%/33.3%), display three columns on medium and large devices, and automatically stack them on small devices:

Three unethiest columns

This example shows how to create three unealable columns (25%/50%/25%), display three columns on medium and large devices, and automatically stack them on small devices:

Two equal columns

This example shows how to create two equal columns (50%/50%), which are always 50%/50% on small, medium, and large devices:

Two columns of uneth liketh

This example shows how to create two unethiesty columns (33.3%/66.6%), with a consistent ratio of 33.3%/66.6% on small, medium and large devices:

Modify the order of the columns

Modify the order | columns | using the .small|medium|large-pull-* .small|medium|large-push-*

Nested columns

You can use nested grids (columns inserted in columns):

Mix: Mobile, desktop

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

Tip: Each class can be zoomed in, and if you want small and large screen devices to be the same width, you can .small-*

Mixed: mobile phone, tablet and desktop equipment

The center column

The .small-centered the column. Medium and large devices can inherit the center of small devices, but you need to set up a center class .large-centered

Column offset

can use .large-offset-* (or .small-offset-* ) Class settings are column right. The number of left outer margins use * number control:

Incomplete column

If the number of columns in a row does not add up to 12, Foundation automatically floats the last column to the right and fills the remaining columns with white space.

Optional The .end is used to set the elements of the last column to float to the left:

Widescreen

The maximum .row mesh (.row) (max-width) is 62.5rem. T he size on a widescreen device may be larger than 62.5rem, so that the column does not fill the page completely, even if the width is set to 100%. But we can set up the new max-width through CSS:

If you want to use the default max-width, but the background color needs to span the entire page across the .row and specify the background color you need: