Inner-margin on columns [Foundation]

Question

I have row with 2 columns. I want the columns to span the whole width of the row and have a margin between them. This way they align with the rows above and beneath.

The default options add margins to both sides of the columns, which doesn't work for me because then the columns don't align with the other rows. I discovered the class "collapse' which removes the default margins, but I still need that margin between the 2 columns.

I can fix this creating my own classes and modifying my markup a little bit, but I want to make sure Foundation doesn't do this for me somehow.

Do you have any advice or best practice for handling this scenario?

I've attached an image to show you what my design calls for.

Thanks! enter image description here

Slawa Eremin Slawa Eremin · Accepted Answer · 2013-12-16T20:21:06

https://gist.github.com/slawaEremin/7993669

If I understand right, you need add some block inside columns.

The problem is that you always should wrap your content using .row and *-12, if there is only one column:

For example:

<div class="row">
  <div class="small-12 columns">
     Some content
  </div>
</div>

<div class="row">
  <div class="small-6 columns">
     Some content
  </div>
  <div class="small-6 columns">
      Some content
  </div>
</div>

Inner-margin on columns [Foundation]

1 Answers