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

Vertical cell alignments

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:Vertical cell alignments

Vertical alignment is just as easy. These mostly just hold values for the align-items property. They do feature legacy browser backups when run in legacy mode though. These backups come in the form of display: inline-block and vertical-align combinations. So it's better to use these settings if you need legacy browser support (IE 8 & 9). The backups only take effect if a column count has been defined though. Like with the align properties, the vAlign properties will also auto-enable wrapping in legacy mode when applied (if a column count has been defined).

Vertical alignments. These will all enable wrapping in legacy mode when a column count has also been applied.

Classes format
Top align: grid--vAlign-top
Bottom align: grid--vAlign-bottom
Center align: grid--vAlign-center

<figure>
  <figcaption>Top align: <code>grid--vAlign-top</code></figcaption>
  <div class="grid grid--cols-3 grid--vAlign-top">
    <div class="grid__cell -color-1" style="height: 100px;"></div>
    <div class="grid__cell -color-2" style="height: 50px;"></div>
    <div class="grid__cell -color-3" style="height: 75px;"></div>
    <div class="grid__cell -color-4" style="height: 50px;"></div>
    <div class="grid__cell -color-5" style="height: 75px;"></div>
    <div class="grid__cell -color-6" style="height: 100px;"></div>
  </div>
</figure>
<figure>
  <figcaption>Bottom align: <code>grid--vAlign-bottom</code></figcaption>
  <div class="grid grid--cols-3 grid--vAlign-bottom">
    <div class="grid__cell -color-1" style="height: 100px;"></div>
    <div class="grid__cell -color-2" style="height: 50px;"></div>
    <div class="grid__cell -color-3" style="height: 75px;"></div>
    <div class="grid__cell -color-4" style="height: 50px;"></div>
    <div class="grid__cell -color-5" style="height: 75px;"></div>
    <div class="grid__cell -color-6" style="height: 100px;"></div>
  </div>
</figure>
<figure>
  <figcaption>Center align: <code>grid--vAlign-center</code></figcaption>
  <div class="grid grid--cols-3 grid--vAlign-center">
    <div class="grid__cell -color-1" style="height: 100px;"></div>
    <div class="grid__cell -color-2" style="height: 50px;"></div>
    <div class="grid__cell -color-3" style="height: 75px;"></div>
    <div class="grid__cell -color-4" style="height: 50px;"></div>
    <div class="grid__cell -color-5" style="height: 75px;"></div>
    <div class="grid__cell -color-6" style="height: 100px;"></div>
  </div>
</figure>
Mixin format
Top align: $vAlign: top
Bottom align: $vAlign: bottom
Center align: $vAlign: center

<figure>
  <figcaption>Top align: <code>$vAlign: top</code></figcaption>
  <div class="mixin-34">
    <div class="mixin__cell -color-1" style="height: 100px;"></div>
    <div class="mixin__cell -color-2" style="height: 50px;"></div>
    <div class="mixin__cell -color-3" style="height: 75px;"></div>
    <div class="mixin__cell -color-4" style="height: 50px;"></div>
    <div class="mixin__cell -color-5" style="height: 75px;"></div>
    <div class="mixin__cell -color-6" style="height: 100px;"></div>
  </div>
</figure>
<figure>
  <figcaption>Bottom align: <code>$vAlign: bottom</code></figcaption>
  <div class="mixin-35">
    <div class="mixin__cell -color-1" style="height: 100px;"></div>
    <div class="mixin__cell -color-2" style="height: 50px;"></div>
    <div class="mixin__cell -color-3" style="height: 75px;"></div>
    <div class="mixin__cell -color-4" style="height: 50px;"></div>
    <div class="mixin__cell -color-5" style="height: 75px;"></div>
    <div class="mixin__cell -color-6" style="height: 100px;"></div>
  </div>
</figure>
<figure>
  <figcaption>Center align: <code>$vAlign: center</code></figcaption>
  <div class="mixin-36">
    <div class="mixin__cell -color-1" style="height: 100px;"></div>
    <div class="mixin__cell -color-2" style="height: 50px;"></div>
    <div class="mixin__cell -color-3" style="height: 75px;"></div>
    <div class="mixin__cell -color-4" style="height: 50px;"></div>
    <div class="mixin__cell -color-5" style="height: 75px;"></div>
    <div class="mixin__cell -color-6" style="height: 100px;"></div>
  </div>
</figure>

.mixin-34 {
  @include grid(3, $vAlign: top);
}
.mixin-35 {
  @include grid(3, $vAlign: bottom);
}
.mixin-36 {
  @include grid(3, $vAlign: center);
}

Using vertical alignment with grid__inner elements and a gutter

Classes format

<div class="grid__wrapper add-shadow">
  <div class="grid grid--hasInners grid--gutter-20 grid--cols-3 grid--vAlign-center">
    <div class="grid__cell" style="height: 75px;">
      <div class="grid__inner add-border"></div>
    </div>
    <div class="grid__cell" style="height: 50px;">
      <div class="grid__inner add-border"></div>
    </div>
    <div class="grid__cell" style="height: 100px;">
      <div class="grid__inner add-border"></div>
    </div>
    <div class="grid__cell" style="height: 50px;">
      <div class="grid__inner add-border"></div>
    </div>
    <div class="grid__cell" style="height: 75px;">
      <div class="grid__inner add-border"></div>
    </div>
    <div class="grid__cell" style="height: 100px;">
      <div class="grid__inner add-border"></div>
    </div>
  </div>
</div>
Mixin format

<div class="mixin__wrapper add-shadow">
  <div class="mixin-37">
    <div class="mixin__cell" style="height: 75px;">
      <div class="mixin__inner add-border"></div>
    </div>
    <div class="mixin__cell" style="height: 50px;">
      <div class="mixin__inner add-border"></div>
    </div>
    <div class="mixin__cell" style="height: 100px;">
      <div class="mixin__inner add-border"></div>
    </div>
    <div class="mixin__cell" style="height: 50px;">
      <div class="mixin__inner add-border"></div>
    </div>
    <div class="mixin__cell" style="height: 75px;">
      <div class="mixin__inner add-border"></div>
    </div>
    <div class="mixin__cell" style="height: 100px;">
      <div class="mixin__inner add-border"></div>
    </div>
  </div>
</div>

.mixin-37 {
  @include grid(3, 20px, $vAlign: center, $inners: true);
}

.mixin__wrapper {
  padding-bottom: 0.1px;
}

Using nested grids to vertically align text inside full sized grid cells

Classes format

Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Tum Triarius: Posthac quidem, inquit, audacius.

Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Quae sequuntur igitur? Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter.

At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?

Duo Reges: constructio interrete. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Stulti autem malorum memoria torquentur, sapientes bona praeterita grata recordatione renovata delectant. A primo, ut opinor, animantium ortu petitur origo summi boni.


<div class="grid__wrapper">
  <div class="grid grid--cols-3 grid--gutter-20 grid--hasInners">
    <div class="grid__cell">
      <div class="grid__inner grid grid--vAlign-center add-border">
        <div class="grid__cell add-padding"><p>Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Tum Triarius: Posthac quidem, inquit, audacius.</p> <p> Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Quae sequuntur igitur? Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter.</p>
        </div>
      </div>
    </div>
    <div class="grid__cell">
      <div class="grid__inner grid grid--vAlign-center add-border">
        <div class="grid__cell add-padding"><p>At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?</p>
        </div>
      </div>
    </div>
    <div class="grid__cell">
      <div class="grid__inner grid grid--vAlign-center add-border">
        <div class="grid__cell add-padding"><p>Duo Reges: constructio interrete. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Stulti autem malorum memoria torquentur, sapientes bona praeterita grata recordatione renovata delectant. A primo, ut opinor, animantium ortu petitur origo summi boni.</p>
        </div>
      </div>
    </div>
  </div>
</div>
Mixin format

Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Tum Triarius: Posthac quidem, inquit, audacius.

Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Quae sequuntur igitur? Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter.

At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?

Duo Reges: constructio interrete. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Stulti autem malorum memoria torquentur, sapientes bona praeterita grata recordatione renovata delectant. A primo, ut opinor, animantium ortu petitur origo summi boni.


<div class="mixin__wrapper">
  <div class="mixin-38">
    <div class="mixin__cell">
      <div class="mixin-38B mixin__inner add-border">
        <div class="mixin__cell add-padding"><p>Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Tum Triarius: Posthac quidem, inquit, audacius.</p> <p> Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Quae sequuntur igitur? Iis igitur est difficilius satis facere, qui se Latina scripta dicunt contemnere. Sed tamen est aliquid, quod nobis non liceat, liceat illis. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter.</p>
        </div>
      </div>
    </div>
    <div class="mixin__cell">
      <div class="mixin-38B mixin__inner add-border">
        <div class="mixin__cell add-padding"><p>At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?</p>
        </div>
      </div>
    </div>
    <div class="mixin__cell">
      <div class="mixin-38B mixin__inner add-border">
        <div class="mixin__cell add-padding"><p>Duo Reges: constructio interrete. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Stulti autem malorum memoria torquentur, sapientes bona praeterita grata recordatione renovata delectant. A primo, ut opinor, animantium ortu petitur origo summi boni.</p>
        </div>
      </div>
    </div>
  </div>
</div>

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

.mixin-38B {
  @include grid($vAlign: center);
}

.mixin__wrapper {
  padding-bottom: 0.1px;
}

Changing the vertical alignment of a single cell using grid__cell--vAlign-xxx classes (xxx being top, bottom, or center). If using the mixin, use the align-self css property and also vertical-align: xxx !important if running legacy mode.

Classes format

<div class="grid grid--cols-3 grid--vAlign-bottom">
  <div class="grid__cell -color-1" style="height: 80px;"></div>
  <div class="grid__cell -color-2" style="height: 25px;"></div>
  <div class="grid__cell -color-3 grid__cell--vAlign-top" style="height: 50px;"></div>
  <div class="grid__cell -color-4" style="height: 30px;"></div>
  <div class="grid__cell -color-5" style="height: 40px;"></div>
  <div class="grid__cell -color-6" style="height: 75px;"></div>
</div>
Mixin format

<div class="mixin-38C">
  <div class="mixin__cell -color-1" style="height: 80px;"></div>
  <div class="mixin__cell -color-2" style="height: 25px;"></div>
  <div class="mixin__cell -color-3 mixin__oddOneOut" style="height: 50px;"></div>
  <div class="mixin__cell -color-4" style="height: 30px;"></div>
  <div class="mixin__cell -color-5" style="height: 40px;"></div>
  <div class="mixin__cell -color-6" style="height: 75px;"></div>
</div>

.mixin-38C {
  @include grid(3, $vAlign: bottom);
}

.mixin__oddOneOut {
  align-self: flex-start;

  //IE 8/9 needs this if using legacy mode
  vertical-align: top !important;
}

Vertical flow

Applying grid--vertical ($vertical: true in the mixin) is simply adding flex-direction: column. This flips the grid around so that grid cells progressively move down the page instead of across.

Using the vertical setting features a backup for legacy browsers though whereas applying flex-direction: column on it's own does not.

Applying a vertical grid flow.

Classes format

<div class="grid__wrapper">
  <div class="grid grid--gutter-20 grid--vertical">
    <div class="grid__cell -color-1"></div>
    <div class="grid__cell -color-2"></div>
    <div class="grid__cell -color-3"></div>
  </div>
</div>
Mixin format

<div class="mixin__wrapper">
  <div class="mixin-33">
    <div class="mixin__cell -color-1"></div>
    <div class="mixin__cell -color-2"></div>
    <div class="mixin__cell -color-3"></div>
  </div>
</div>

.mixin-33 {
  @include grid($gutter: 20px, $vertical: true);
}