CODEWITHSUNDEEP
gridmarginpaddingzurb-foundation
London804
London804

Reputation: 1116

How do I decrease space between items in a grid in foundation?

I'm building a simple site in foundation and I thought it would make it faster because it has awesome grid. Problem is when I put images on my grid the spacing between them is too far away. I want to decrease the spacing so the images are basically 15px or so from each other. I've tried to change the padding and margin but it throws off the entire grid. Is there a simple way to achieve this in Foundation or am I just better of writing this from scratch? My HTML is below.

<div class="row">
<div class="gallery small-4 large-4 columns">
  <img src="assets/img/chaiLatte.jpg" alt="Painting by LaRue. ">
</div>
<div class="gallery small-4 large-4 columns">
  <img src="assets/img/milkchocolate.jpg" alt="Painting by Bellingham.">
</div>
  <div class="gallery small-4 large-4 columns">
      <img src="assets/img/darkChocolate.png" alt="Painting by Bellingham.">
  </div>

Upvotes: 2

Views: 2962

Answers (2)

Gavin Bruce
Gavin Bruce

Reputation: 1809

There is a $column-gutter variable in _settings.scss. This controls the grid spacing. By default its set to $column-gutter: emCalc(30px);. Try changing this value. This is only going to help you if you are using the sass version.

Upvotes: 2

jameswilliamiii
jameswilliamiii

Reputation: 878

You can collapse the grid to remove the spacing by adding that class to the row containing your images. You can then add the padding or margin to your images to give the 15px spacing you want.

<div class="row collapse">
  <div class="gallery small-4 large-4 columns"></div>
  <div class="gallery small-4 large-4 columns"></div>
  <div class="gallery small-4 large-4 columns"></div>
</div>

Upvotes: 2

Related Questions