Horizontal cell alignments

Body:Horizontal cell alignments

Horizontal cell alignment is easy with Gutter Grid. These are mostly just classes that hold justify-content values but they do feature legacy browser backups so it's better to use these than the justify-content property directly if legacy support is important to you. In old browsers, the space settings are outputted as center alignments instead. It's impossible to replicate the flexbox space alignments in browsers that don't support flexbox.

By default, if there are not enough cells in the row to fill the specified number of columns, the cells will align to the left, similar to how CSS Grid behaves. This default functionality was introduced in version 4 to better align with how CSS Grid works. In version 3, the left over grid cells would grow to fill the remaining space left over in the grid by default. To replicate the version 4 default functionality in version 3, use $align: left or the grid--align-left class.

Default cell alignment when there are not enough cells to fill the row

Classes format


<div class="grid 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>

Mixin format


<div class="mixin-26">
  <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>


.mixin-26 {
  @include grid(3);
}

If this isn't the effect you are after, you might want to use some of these other alignment options instead. Note that the align and space properties will also implicitly enable wrapping when running in legacy mode. Adding grid--noWrap or $wrap: false will prevent this implicit behaviour in modern browsers however IE8 and 9 will still wrap.

Stretch the grid cells to fill remaining space using grid--stretch or $stretch: true (this is the default functionality in version 3). This still requires adding grid--wrap or $wrap: true to enable wrapping in legacy mode.

Classes format


<div class="grid grid--cols-3 grid--stretch">
  <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>

Mixin format


<div class="mixin-27">
  <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>


.mixin-27 {
  @include grid(3, $stretch: true);
}

Other alignment options. All of these will also enable wrapping in legacy mode.

Classes format

Align left: grid--align-left

Align right: grid--align-right

Align center: grid--align-center

Align stretch: grid--align-stretch
(Like grid--stretch but enables wrapping in legacy mode)

Space between: grid--space-between

Space around: grid--space-around

Space evenly: grid--space-evenly (includes space-around backup)


<figure>
  <figcaption>Align left: <code>grid--align-left</code></figcaption>
  <div class="grid grid--cols-3 grid--align-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>
</figure>
<figure>
  <figcaption>Align right: <code>grid--align-right</code></figcaption>
  <div class="grid grid--cols-3 grid--align-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>
</figure>
<figure>
  <figcaption>Align center: <code>grid--align-center</code></figcaption>
  <div class="grid grid--cols-3 grid--align-center">
    <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>
</figure>
<figure>
  <figcaption>Align stretch: <code>grid--align-stretch</code> <br/> (Like <code>grid--stretch</code> but enables wrapping in legacy mode)</figcaption>
  <div class="grid grid--cols-3 grid--align-stretch">
    <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>
</figure>
<figure>
  <figcaption>Space between: <code>grid--space-between</code></figcaption>
  <div class="grid grid--cols-3 grid--space-between">
    <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>
</figure>
<figure>
  <figcaption>Space around: <code>grid--space-around</code></figcaption>
  <div class="grid grid--cols-3 grid--space-around">
    <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>
</figure>
<figure>
  <figcaption>Space evenly: <code>grid--space-evenly</code> (includes <code>space-around</code> backup)</figcaption>
  <div class="grid grid--cols-3 grid--space-evenly">
    <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>
</figure>

Mixin format

Align left: $align: left

Align right: $align: right

Align center: $align: center

Align stretch: $align: stretch
(Like $stretch: true but enables wrapping in legacy mode)

Space between: $space: between

Space around: $space: around

Space evenly: $space: evenly (includes space-around backup)


<figure>
  <figcaption>Align left: <code>$align: left</code></figcaption>
  <div class="mixin-28A">
    <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>
</figure>
<figure>
  <figcaption>Align right: <code>$align: right</code></figcaption>
  <div class="mixin-28B">
    <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>
</figure>
<figure>
  <figcaption>Align center: <code>$align: center</code></figcaption>
  <div class="mixin-29">
    <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>
</figure>
<figure>
  <figcaption>Align stretch: <code>$align: stretch</code> <br/> (Like <code>$stretch: true</code> but enables wrapping in legacy mode)</figcaption>
  <div class="mixin-29B">
    <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>
</figure>
<figure>
  <figcaption>Space between: <code>$space: between</code></figcaption>
  <div class="mixin-30">
    <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>
</figure>
<figure>
  <figcaption>Space around: <code>$space: around</code></figcaption>
  <div class="mixin-31">
    <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>
</figure>
<figure>
  <figcaption>Space evenly: <code>$space: evenly</code> (includes <code>space-around</code> backup)</figcaption>
  <div class="mixin-31B">
    <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>
</figure>


.mixin-28A {
  @include grid(3, $align: left);
}
.mixin-28B {
  @include grid(3, $align: right);
}
.mixin-29 {
  @include grid(3, $align: center);
}
.mixin-29B {
  @include grid(3, $align: stretch);
}
.mixin-30 {
  @include grid(3, $space: between);
}
.mixin-31 {
  @include grid(3, $space: around);
}
.mixin-31B {
  @include grid(3, $space: evenly);
}

Of coarse, you can use alignment in more circumstances than just how the grid handles not having enough cells to fill a row. A good example is pagination that uses grid--space-around to space out the pagination cells:

Classes format


<ol class="grid grid--hasInners grid--space-around add-padding">
  <li class="grid__cell"><a class="grid__inner add-shadow add-padding" href="#">1</a></li>
  <li class="grid__cell"><a class="grid__inner add-shadow add-padding" href="#">2</a></li>
  <li class="grid__cell"><a class="grid__inner add-shadow add-padding" href="#">3</a></li>
  <li class="grid__cell"><a class="grid__inner add-shadow add-padding" href="#">4</a></li>
  <li class="grid__cell"><a class="grid__inner add-shadow add-padding" href="#">5</a></li>
</ol>

Mixin format


<ol class="mixin-32 add-padding">
  <li class="mixin__cell"><a class="mixin__inner add-shadow add-padding" href="#">1</a></li>
  <li class="mixin__cell"><a class="mixin__inner add-shadow add-padding" href="#">2</a></li>
  <li class="mixin__cell"><a class="mixin__inner add-shadow add-padding" href="#">3</a></li>
  <li class="mixin__cell"><a class="mixin__inner add-shadow add-padding" href="#">4</a></li>
  <li class="mixin__cell"><a class="mixin__inner add-shadow add-padding" href="#">5</a></li>
</ol>


.mixin-32 {
  @include grid($space: around, $inners: true);
}

Horizontal cell alignments

Site header

Tag line

Body:Horizontal cell alignments

Toolbar