Foundation Grid

Posted onby admin

Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.

Basic

About the Avangrid Foundation. The Avangrid Foundation is an independent 501(c)(3) organization that engages in mission-driven giving and is the principal philanthropic arm of AVANGRID, Inc., based in Orange, Connecticut. Since 2002, the Foundation and its predecessors has invested millions of dollars in grants, contributions, scholarships and matching gift programs with a focus on building. Six Column Grid. In this example each column spans two units, making things a little more challenging than the three column grid. It splits up each column of a three column grid into two further columns. The six column grid provides you with more options and opportunities to fine tune smaller details. New in Foundation 6 is a Flexbox-powered grid, which you can use instead of the traditional float grid. Become a master of the Foundation Grids to create complex layouts faster and with less code. The new XY Grid is the newest and most powerful version. Stay up-to-date with all the new features in Foundation 6.4 and learn how to migrate to the. Foundation’s grid has always been flexible, but with CSS Grid hitting browsers the potential to mix, match, and combine grids is quickly becoming a reality. This example highlights one potential outcome. See the Pen Grids within Grids by ZURB Foundation (@ZURBFoundation) on CodePen. Discover NARS's Soft Matte Long-Lasting Foundation now at Sephora! Shop now, and pay in 4 interest-free payments later with Klarna (US) and Paybright (CA)!

Start by adding an element with a class of row. This will create a horizontal block to contain vertical columns. Then add divs with a column class within that row. You can use column or columns - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes.

Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.

HTML

Rendered HTML

4
full6
68
9
full8
67
full6

Small Grid

Small grids expand to large screens easier than large grids cram into small screens.

HTML

Rendered HTML

10 columns
9 columns

Medium Grid

Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes.

Rendered HTML

National grid grant application
10 columns
9 columns

Advanced

You can nest the grids indefinitely, though at a certain point it will get absurd.

HTML

Rendered HTML

8 8 Nested
4
4

Offsets

Move blocks up to 11 columns to the right by using classes like .large-offset-1 and .small-offset-3.

HTML

Rendered HTML

11
10, offset 1
9, offset 2
8, offset 3

Incomplete Rows

Grid

In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of end in order to override that behavior.

HTML

Rendered HTML

3
3

Collapse/Uncollapse Rows

The collapse class lets you remove column gutters (padding).

Grid

There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and collapse or uncollapse and add that to your row element. Example removes the gutter at the large breakpoint and then adds the gutter to columns at medium and small.

HTML

Rendered HTML

Scale the browser down to a medium or smaller size to see the difference.

Foundation

On small, I have gutters!

On a medium screen, I have gutters!

On a large screen, I have no gutters!

On small, I have gutters!

On a medium screen, I have gutters!

On a large screen, I have no gutters!

Centered Columns

Center your columns by adding a class of small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a large-centered class. To uncenter on large screens use large-uncentered.

HTML

Rendered HTML

Source Ordering

Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. medium-push-#, large-push-# is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.

HTML

Grid

Rendered HTML

2, last
3, last
4, last

Codepen Foundation Xy Grid

5, last
6, last

Customize with Sass

Customizing the grid is easy with the Sass variables provided in the _settings.scss file.

SCSS

Basic

You can use the grid-row() and grid-column() mixins to create your own rows and columns with semantic markup, like so:

Foundation Grid Virtual World

HTML

Foundation Grid Of Poem

Advanced

You can further customize your grid columns using the provided options in the grid-column() mixin:

Row Mixin Options

SCSS

Column Mixin Options

SCSS

Sass Errors?

Foundation Grid System

If the default 'foundation' import was commented out, then make sure you import this file:

SCSS


Building Blocks Using Grid

Foundation Grid Layout


Foundation Grid Classes

Want more? Check out all the hot Building Blocks ⇨