Spacing between grid cells in Zurb Foundation 4

Question

Is there an easy way to have spacing between the grid cells in Zurb Foundation 4? I don't want to mess with the CSS of the Foundation elements as that may throw something else off. There's a $column-gutter SCSS variable in their Grid docs:

$column-gutter: 1.875em !default;

However, I'm not sure what that's for as I have seemingly zero space between columns, not 1.875em. Am I expected to just make sure all content within the cells have padding around them?

Artillery

Do you mean like padding? It would be helpful with an example. – Mantling

yes padding. If I have content inside the grid cells, the content is flush against the sides – Artillery

I'd like to know what the point of $column-gutter is, as I can't see it having any effect either. We must be missing a trick here. – Repast

Answer 1

Try to use a separate stylesheet that is loaded after the foundation.css where the content looks something like this:

@media only screen {
  .row .columns, .row .column {
    padding-left: 10px; /* change the values to anything that you want */
    padding-right: 10px;
  }
}

I put it in the @media only screen since for printing you might not want to have it display with the extra padding.

Example of this here

If you want to use this extra padding while printing you have to use the following:

.row .columns, .row .column {
  padding-left: 10px !important; /* change the values to anything that you want */
  padding-right: 10px !important;
}

You have to use the important part since there's a @media only screen in the default foundation.css that will override your values.

EDIT

Just use another separate class for the columns that you want the extra padding applied to. Example:

.extra-padding {
  padding-left: 10px !important; /* change the values to anything that you want */
  padding-right: 10px !important;
}

Example of this here

Mantling

Makes sense, my only concern if this is going to affect other parts of foundation in some way? – Artillery

It will not affect Foundation itself but it might change some other layouts that you don't want to change. Check out my edited post. – Mantling

Answer 2

You can add offsets

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>

http://foundation.zurb.com/docs/components/grid.html

Christenechristening

The question was for modifying the existing gutter to a diff value, not introducing extra cols. – Bacteriostat