CODEWITHSUNDEEP
csszurb-foundationgrid-layout
Desmond
Desmond

Reputation: 1736

Changing Zurb Foundation grid columns so padding is only on one side

Does anyone know if there is a setting to put the column-gutter to only one side? Currently it adds half to each side of the column, so for instance if you wanted a 14px column gutter, it would add 7px on each side. This causes the first column in a row to have a 7px indentation.

I could hack it with extra CSS, but I would prefer to change it in default settings if I can.

Upvotes: 3

Views: 14145

Answers (3)

dwenaus
dwenaus

Reputation: 3326

For an even gutter on each side you can hard code it:

.collapse-half {
  .columns {
    padding-left: .46875rem;
    padding-right: .46875rem;
  }
}

Upvotes: 0

icicleking
icicleking

Reputation: 1077

I've noticed on the Foundation Docs 6 site, they include a .row .row class. This adds negative margins to the block grid example:

.row .row {
  margin-left: -0.9375rem;
  margin-right: -0.9375rem;
}

One solution would be to follow the pattern established in the .row row selector and add

.left-collapse {
  .margin-left: -$column-gutter;
}

Upvotes: 0

am_
am_

Reputation: 2418

It's not possible as far as I know without creating your own mixin or modifying the existing grid-column mixin, and that's not something you'd want to do for a simple case like that.

I'd suggest to instead create your own class for this, for example:

SASS

.left-collapse {
  .columns {
    padding-left: 0;
    padding-right: $column-gutter;
  }
}

And then just add the class to your parent row, almost like you'd want to do with a collapse class for removing all gutter widths - so you'r row would then look like this:

<div class="row left-collapse">
   <div class="large-4 columns">FOO</div>
   <div class="large-4 columns">FOO</div>
   <div class="large-4 columns">FOO</div>
</div>

If you'r not using SASS then just add in your $column-gutter size (default in v4: 1.875em) in the padding-right in your CSS file.

Upvotes: 9

Related Questions