Mobile Grid

A quick example of how Foundation helps with mobile layouts.

On phones, columns become stacked.

That means this twelve column section will be the full width, and so will the three sections you see below.

Section 1

This is a four column section (so three of them across add up to twelve). As noted above on mobile, these columns will be stacked on top of each other.

Section 2

This is another four column section which will be stacked on top of the others. The next section though…

Section 3

Here we've used a block grid (.block-grid.three-up). These are perfect for similarly sized elements that you want to present in a grid even on mobile devices. If you view this on a phone (or small browser window) you can see what we mean.