Search code examples
csszurb-foundationgrid-layout

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.

Solution

  • 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.