Menu icon Foundation
Foundation Grid Mixins and Dealing with Gutters

Previously, I've been using the Susy grid system to design grids based on margin gutters rather than padding.

With the release of Foundation 6, I want to dive into the new grid mixins. It seems the Foundation grid system is great if you want to keep all the grids gutters the same, but I am not sure how to best deal with the padding of the outer columns once I want variation in my gutters, both in a layout and at different breakpoints.

Does anyone have a systematic way of dealing with these issues?

Thanks

gridgutters

Previously, I've been using the Susy grid system to design grids based on margin gutters rather than padding.

With the release of Foundation 6, I want to dive into the new grid mixins. It seems the Foundation grid system is great if you want to keep all the grids gutters the same, but I am not sure how to best deal with the padding of the outer columns once I want variation in my gutters, both in a layout and at different breakpoints.

Does anyone have a systematic way of dealing with these issues?

Thanks

Brandon Arnold almost 4 years ago

6.1 we released the ability to size gutters differently at different breakpoints. If you're using Sass you should check out the gutters map in the settings files.

Christian Magill almost 4 years ago

This is useful, but when you want different sized gutters in the same layout at the same breakpoint things become difficult.

Often you don't want consistent gutters across the board in order to show relationships by proximity.

Christian Magill almost 4 years ago

Here's what i've come up with thus far to generate various size gutter classes based on the a multiplier and the responsive gutters settings. Please test it out and let me know what you think or any potential problems you see.

I've also setup a github repository

https://github.com/christianmagill/foundation-variant-gutter-classes

Thanks!

SCSS

.box{
  height: 200px;
  background-color: #333;
}

$grid-column-responsive-gutter: (
        small: 20px,
        medium: 30px,
);

$grid-column-variant-gutter: (
        'half' : .5,
        'double' : 2
);

@mixin generate-variant-gutter-classes(){
  @each $s, $m in $grid-column-variant-gutter{
    @each $bp, $w in $grid-column-responsive-gutter{
      @include breakpoint($bp){
      $adjustment: 0.5 * $w * $m;
      .gutter-#{$s}
      {
        margin-left: rem-calc($adjustment * -1) !important;
        margin-right: rem-calc($adjustment * -1) !important;
      }
      .gutter-#{$s} > .columns,
      .gutter-#{$s} > .column
      {
        padding-left: rem-calc($adjustment) !important;
        padding-right: rem-calc($adjustment) !important;
      }
      }
    } 
  }
}

@include generate-variant-gutter-classes();

HTML

<div class="row">
            <div class="columns small-3">
                <div class="row">
                    <div class="columns small-6"><div class="box"></div></div>
                    <div class="columns small-6"><div class="box"></div></div>
                </div>
            </div>
            <div class="columns small-6">
                <div class="row gutter-half">
                    <div class="columns small-2"><div class="box"></div></div>
                    <div class="columns small-2"><div class="box"></div></div>
                    <div class="columns small-2"><div class="box"></div></div>
                    <div class="columns small-2"><div class="box"></div></div>
                    <div class="columns small-2"><div class="box"></div></div>
                    <div class="columns small-2"><div class="box"></div></div>
                </div>
            </div>
            <div class="columns small-3">
                <div class="row">
                    <div class="columns small-6">
                        <div class="box"></div>
                    </div>
                    <div class="columns small-6">
                        <div class="box"></div>
                    </div>
                </div>
            </div>
        </div>