Foundation 4 - Margin/gutter between rows

Question

I have a really simple question: how to I get a margin between rows in Foundation 4?

The following mark-up yields 3 spaced link images per row, but no gap between the rows. Maybe a 3 x 3 grid shouldn't be done like this. Otherwise, can Foundation do a square grid w/o additional CSS?

<div class="row">
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
</div>
<div class="row">
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
</div>
<div class="row">
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
</div>

In the interests of time, I've implemented this as 9 left-floated elements, but I'm still curious about row spacing in Foundation.

Ta, Luke

Answer 1

You can override the default margin on the .row in CSS with margin-bottom: 10px;

Alternatively, a good way to implement a 3x3 grid of images in Foundation would be to use a 3-up block grid.

• Foundation 5 block grid
• Foundation 6 block grids