Foundation

Nesting the Grid

Nesting the Grid

← Back to Grid

Page Title (.twelve .columns)

This is an eight column section, starting with this paragraph.
Below this you'll find another row with two sections.

Another Section (.six.columns)

This is a nested row with two six column sections.

Another Section (.six.columns)

This is a nested row with two six column sections.

Now the nested row has been closed, and we're back to the original eight column section.

And this is a four columns section to represent a sidebar (or similar element).

This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
This is a callout with three columns on the left (for the avatar) and nine columns here for the text. This row is inside the four column.
Stay on top of what's happening in responsive design with Responsive from ZURB.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »