Left and right arrow keys navigate. Enter jumps to content.

Outer gutters

Skip to navigationSkip to content

Please enable javascript to access the full functionality of this site

Site header

npm install gutter-grid --save

Tag line

A Sass flexbox based grid system that is able to replicate CSS grid-gap in IE11

Toolbar

View Gutter Grid on GitHub
Preferred system:

Body:Outer gutters

By default, Gutter Grid will place the grid cells on the very edge of the content area as shown in this example:

Classes format

<div class="grid__wrapper">
  <div class="grid grid--gutter-20 grid--cols-3">
    <div class="grid__cell -color-1"></div>
    <div class="grid__cell -color-2"></div>
    <div class="grid__cell -color-3"></div>
    <div class="grid__cell -color-4"></div>
    <div class="grid__cell -color-5"></div>
    <div class="grid__cell -color-6"></div>
  </div>
</div>

//Define gutter sizes like this
$grid-cell-gutters: (
  20 : 20px,
);

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-classes';
Mixin format

<div class="mixin__wrapper">
  <div class="mixin-12">
    <div class="mixin__cell -color-1"></div>
    <div class="mixin__cell -color-2"></div>
    <div class="mixin__cell -color-3"></div>
    <div class="mixin__cell -color-4"></div>
    <div class="mixin__cell -color-5"></div>
    <div class="mixin__cell -color-6"></div>
  </div>
</div>

.mixin-12 {
  @include grid(3, 20px);
}

.mixin__wrapper {
  padding-bottom: 0.1px;
}

This isn't always the desired layout though. Sometimes you want the gutters to also apply around the edges of the grid as well. This is when the outerGutters setting comes in.

Using the outerGutters setting to apply the gutter to the edges of the grid

Classes format

<div class="grid__wrapper">
  <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters">
    <div class="grid__cell -color-1"></div>
    <div class="grid__cell -color-2"></div>
    <div class="grid__cell -color-3"></div>
    <div class="grid__cell -color-4"></div>
    <div class="grid__cell -color-5"></div>
    <div class="grid__cell -color-6"></div>
  </div>
</div>

//Define gutter sizes like this
$grid-cell-gutters: (
  20 : 20px,
);

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-classes';
Mixin format

<div class="mixin__wrapper">
  <div class="mixin-14">
    <div class="mixin__cell -color-1"></div>
    <div class="mixin__cell -color-2"></div>
    <div class="mixin__cell -color-3"></div>
    <div class="mixin__cell -color-4"></div>
    <div class="mixin__cell -color-5"></div>
    <div class="mixin__cell -color-6"></div>
  </div>
</div>

.mixin-14 {
  @include grid(3, 20px, $outerGutters: true);
}

.mixin__wrapper {
  padding-bottom: 0.1px;
}

The setting also comes in horizontal only, and vertical only variants. For the class system, that comes in the form of these classes: grid--outerGutters-h for horizontal only and grid--outerGutters-v for vertical only. For the mixin version, set $outerGutters: h for horizontal or $outerGutters: v for vertical. The setting also comes in top, left, bottom, and right variant's as you will see in the examples below.

Horizontal and vertical only variants

Classes format
Horizontal outer gutter: grid--outerGutters-h
Vertical outer gutter: grid--outerGutters-v

<figure>
  <figcaption>Horizontal outer gutter: <code>grid--outerGutters-h</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-h">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Vertical outer gutter: <code>grid--outerGutters-v</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-v">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>

//Define gutter sizes like this
$grid-cell-gutters: (
  20 : 20px,
);

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-classes';
Mixin format
Horizontal outer gutter: $outerGutters: h
Vertical outer gutter: $outerGutters: v

<figure>
  <figcaption>Horizontal outer gutter: <code>$outerGutters: h</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-15">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Vertical outer gutter: <code>$outerGutters: v</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-16">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>

.mixin-15 {
  @include grid(3, 20px, $outerGutters: h);
}

.mixin-16 {
  @include grid(3, 20px, $outerGutters: v);
}

.mixin__wrapper {
  padding-bottom: 0.1px;
}

Top, bottom, left and right only variants

Classes format
Top outer gutter: grid--outerGutters-top
Bottom outer gutter: grid--outerGutters-bottom
Left outer gutter: grid--outerGutters-left
Right outer gutter: grid--outerGutters-right

<figure>
  <figcaption>Top outer gutter: <code>grid--outerGutters-top</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-top">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Bottom outer gutter: <code>grid--outerGutters-bottom</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-bottom">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Left outer gutter: <code>grid--outerGutters-left</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-left">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Right outer gutter: <code>grid--outerGutters-right</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-right">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>

//Define gutter sizes like this
$grid-cell-gutters: (
  20 : 20px,
);

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-classes';
Mixin format
Top outer gutter: $outerGutters: top
Bottom outer gutter: $outerGutters: bottom
Left outer gutter: $outerGutters: left
Right outer gutter: $outerGutters: right

<figure>
  <figcaption>Top outer gutter: <code>$outerGutters: top</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-17">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Bottom outer gutter: <code>$outerGutters: bottom</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-18">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Left outer gutter: <code>$outerGutters: left</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-19">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Right outer gutter: <code>$outerGutters: right</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-20">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>

.mixin-17 {
  @include grid(3, 20px, $outerGutters: top);
}

.mixin-18 {
  @include grid(3, 20px, $outerGutters: bottom);
}

.mixin-19 {
  @include grid(3, 20px, $outerGutters: left);
}

.mixin-20 {
  @include grid(3, 20px, $outerGutters: right);
}

.mixin__wrapper {
  padding-bottom: 0.1px;
}

Also, there is a delayed variant for the horizontal classes. This is primarily for use with overarching page layouts. The idea with the delayed variant is that when the screen reaches the point where the edge of the screen would meet the edge of the grid (plus the gutter), horizontal outer gutters are applied to prevent the edges of the grid from touching the edges of the screen. The $grid-page-width global setting determines when the change occurs. Define this before the import statements to change it.

Delayed horizontal, left and right gutter variants (resize browser to see it take effect). There are no vertical variants. I have purposely made the design of the site less than 1200px to clearly demonstrate this delay effect.

Classes format
Horizontal outer gutter both sides delayed: grid--outerGutters-h-delayed
Left outer gutter delayed: grid--outerGutters-left-delayed
Right outer gutter delayed: grid--outerGutters-right-delayed

<figure>
  <figcaption>Horizontal outer gutter both sides delayed: <code>grid--outerGutters-h-delayed</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-h-delayed">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Left outer gutter delayed: <code>grid--outerGutters-left-delayed</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-left-delayed">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Right outer gutter delayed: <code>grid--outerGutters-right-delayed</code></figcaption>
  <div class="grid__wrapper">
    <div class="grid grid--gutter-20 grid--cols-3 grid--outerGutters-right-delayed">
      <div class="grid__cell -color-1"></div>
      <div class="grid__cell -color-2"></div>
      <div class="grid__cell -color-3"></div>
      <div class="grid__cell -color-4"></div>
      <div class="grid__cell -color-5"></div>
      <div class="grid__cell -color-6"></div>
    </div>
  </div>
</figure>

//Define gutter sizes like this
$grid-cell-gutters: (
  20 : 20px,
);

//Edit the screen size at which point the switch happens
$grid-page-width: 1200px;

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-classes';
Mixin format
Horizontal outer gutter, both sides delayed: $outerGutters: h-delayed
Left outer gutter delayed: $outerGutters: left-delayed
Right outer gutter delayed: $outerGutters: right-delayed

<figure>
  <figcaption>Horizontal outer gutter, both sides delayed: <code>$outerGutters: h-delayed</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-21">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Left outer gutter delayed: <code>$outerGutters: left-delayed</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-22">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>
<figure>
  <figcaption>Right outer gutter delayed: <code>$outerGutters: right-delayed</code></figcaption>
  <div class="mixin__wrapper">
    <div class="mixin-23">
      <div class="mixin__cell -color-1"></div>
      <div class="mixin__cell -color-2"></div>
      <div class="mixin__cell -color-3"></div>
      <div class="mixin__cell -color-4"></div>
      <div class="mixin__cell -color-5"></div>
      <div class="mixin__cell -color-6"></div>
    </div>
  </div>
</figure>

.mixin-21 {
  @include grid(3, 20px, $outerGutters: h-delayed);
}

.mixin-22 {
  @include grid(3, 20px, $outerGutters: left-delayed);
}

.mixin-23 {
  @include grid(3, 20px, $outerGutters: right-delayed);
}

.mixin__wrapper {
  padding-bottom: 0.1px;
}