O'Reilly logo

Getting Started with Zurb Foundation 4 by Andrew D. Patterson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Nesting rows in columns

The real strength of Foundation as a tool for website layout is its nesting capability. Besides a simple grid with rows and columns, you can nest rows within columns. Each newly defined row has its own cells to be grouped into columns.

Going back to our blog, let's say you have something in your content area that would best be displayed in three equal columns. That area was eight cells wide. 8 is not divisible by 3. But 12 is divisible by 3.

So let's create a new row within the content area. We'll refer to this as an inner row as it is treated a little differently than the outer rows we've seen up until now. This is what we want it to look like where the three columns shown in a lighter grey are columns in an inner row:

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required