How to bridge rows in Foundation
Most CSS grids — Foundation included — organize layout into rows that are, in turn, divided into cells or columns. But what if you want a column to extend over two rows? Officially, you’re stuck. But if we redefine the problem, a solution appears. Here’s a how you can (appear to) extend Foundation columns past one row in three minutes.
1. Set up a row with columns.
In this example, we’ll use two quarter-columns and a half.
<div class="row">
<div class="small-3 columns">
a
</div>
<div class="small-3 columns">
b
</div>
<div class="small-6 columns">
c
</div>
</div>
2. Put two rows inside of the third column.
Start by adding a row to the last column.
<div class="row">
<div class="small-3 columns">
a
</div>
<div class="small-3 columns">
b
</div>
<div class="small-6 columns">
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
Then give each inner row one column apiece.
<div class="row">
<div class="small-3 columns">
a
</div>
<div class="small-3 columns">
b
</div>
<div class="small-6 columns">
<div class="row">
<div class="small-12 columns">
d
</div>
</div>
<div class="row">
<div class="small-12 columns">
e
</div>
</div>
</div>
</div>
3. Repeat for every column you don’t want
It may feel backwards, to change every column you except the one you wanted to “stretch.” But stay with us.
<div class="row">
<div class="small-3 columns">
<div class="row">
<div class="small-12 columns">
f
</div>
</div>
<div class="row">
<div class="small-12 columns">
g
</div>
</div>
</div>
<div class="small-3 columns">
h
</div>
<div class="small-6 columns">
<div class="row">
<div class="small-12 columns">
i
</div>
</div>
<div class="row">
<div class="small-12 columns">
j
</div>
</div>
</div>
</div>
How it works
This uses a little sleight of hand. Instead of making one column step across rows, other columns sub-divide. From the users’ perspective, though, the design seems to have gained a long center column. It all happens through the magic of nesting.
Nesting is when one type of element resides in another element of the same type. For example, Foundation’s grid is divided into rows each row is divided into columns which, in turn, can hold rows that hold columns that can hold rows … .
As you might guess, nesting gets complicated when abused. Preserve your sanity. Don’t sub-divide too many levels.