Gridifier cheat sheet

Wraps around a whole grid row.

Can only have elements with the .unit class immediately inside.

Defines an element as being a single grid module.

Can only be immediately inside a .grid element.

<div class="grid">
  <div class="unit">…</div>
  <div class="unit">…</div>
</div>

Nothing can be outside of .unit when using grids.

Aligns all the units to the bottom of the grid row.

Vertically centers all the units inside a grid row.

Forces all the unit elements to be the same height.

Unit takes up one whole row.

Unit takes up half of the available width in the row.

Unit takes up one-third of the available width in the row.

Unit takes up two-thirds of the available width in the row.

.xs-1

.xs-1-2

.xs-1-3

.xs-2-3

.m-1

.m-1-2

.m-1-3

.m-2-3

.m-1-4

.m-3-4

Fractions are simplified, so ²/₄ is ¹/₂.

.l-1

.l-1-2

.l-1-3

.l-2-3

.l-1-4

.l-3-4

.l-1-5

.l-2-5

.l-3-5

.l-4-5

.l-1-6

.l-5-6

Fractions are simplified, so ³/₆ is ¹/₂.

Allows a unit to be hidden on specific screens sizes.

e.g. .unit-xs-hidden, .xs-0

Allows a unit to be centered horizontally on specific screen sizes.

e.g. .unit-m-centered

Makes empty space to the left of the unit by the specified amount.

There are offset sizes available for every unit width.

e.g. .unit-offset-m-1-2, .unit-offset-l-1-6

Pushes the unit to the right, to change order.

There are push sizes available for every unit width.

e.g. .unit-push-m-1-4, .unit-push-l-1-3

Pulls the unit to the left, to change order.

There are pull sizes available for every unit width.

e.g. .unit-pull-m-3-4, .unit-pull-l-2-3

Makes the content distribute, the top of the unit’s content will align, the bottom content will align.

The content in the center will distribute its surrounding space evenly.

Without the [size] in the class the layout applies all the time—the size allows the layout to apply in specific situations.

When using distribute, can cause a chunk of content to stretch vertically.

Added to an element inside a unit—will not work added directly to a .unit.

Without the [size] in the class the layout applies all the time—the size allows the layout to apply in specific situations.

When using .content-fill the elements will stretch the whole width of the containing box. Adding .content-shrink will allow the element to be only as wide as it needs to be.

Added to an element inside a unit—will not work added directly to a .unit.

Without the [size] in the class the layout applies all the time—the size allows the layout to apply in specific situations.

Lumps all the content together in the vertical center of the element.

This class exists in variations for all sizes to allow distribution only at specific points or size-less for permanent distribution.

Without the [size] in the class the layout applies all the time—the size allows the layout to apply in specific situations.

Lumps all the content together in the horizontal center of the element.

Without the [size] in the class the layout applies all the time—the size allows the layout to apply in specific situations.

In order to make certain layouts, sometimes grids need to be put inside other grids.

<div class="grid">
  <div class="unit m-1-2 l-1-2">

    <!-- Placing a grid inside another grid gives extra flexibility for certain layouts -->
    <div class="grid">
      <div class="unit m-1 l-1-2">Unit 1</div>
      <div class="unit m-1 l-1-2">Unit 2</div>
    </div>

  </div>
  <div class="unit m-1-2 l-1-2">

    <div class="grid">
      <div class="unit m-1 l-1-2">Unit 3</div>
      <div class="unit m-1 l-1-2">Unit 4</div>
    </div>

  </div>
</div>

Using the .grid-middle class, we can align the units to the middle of each other.

<div class="grid grid-middle">
  <div class="unit">Unit 1</div>
  <div class="unit">Unit 2</div>
  <div class="unit">Unit 3</div>
</div>

There’s also .grid-bottom to align all the units to the bottom.

<div class="grid grid-bottom">
  ⋮
</div>

If the content inside units is different lengths, you can distribute it to align both the top and bottom.

<div class="grid grid-stretch">
  <div class="unit unit-content-distribute">
    <h2>Unit 1</h2>
    <p class="content-fill">Lorem ipsum dolor sit amet.</p>
    <a class="content-shrink" href="…">Go!</a>
  </div>
  <div class="unit unit-content-distribute">
    <h2>Unit 2</h2>
    <p class="content-fill">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <a class="content-shrink" href="…">Don’t go!</a>
  </div>
</div>

Using the hidden classes, we can hide specific units on specific screen sizes.

<div class="grid">
  <div class="unit s-1-4 l-1-4">Unit 1</div>
  <div class="unit unit-s-hidden l-1-4">Unit 2</div>
  <div class="unit s-1-4 l-1-4">Unit 3</div>
  <div class="unit unit-s-hidden l-1-4">Unit 4</div>
</div>

If you want to create extra whitespace beside units you can use the offset classes.

<div class="grid">
  <div class="unit l-1-2">Unit 1</div>
  <div class="unit l-1-2">Unit 2</div>
  <div class="unit l-1-4 unit-offset-l-1-4">Unit 3</div>
  <div class="unit l-1-2">Unit 4</div>
</div>

Units can be reordered using push and pull classes.

<div class="grid">
  <div class="unit s-1 l-1-2 unit-push-l-1-2">Unit 1</div>
  <div class="unit s-1 l-1-2 unit-pull-l-1-2">Unit 2</div>
</div>

The letters of the text look all smushed together — this is caused by text being inside .grid but not inside .unit.

<div class="grid">
  <!-- Nothing can be outside the .unit -->
  <h2>This text would be smushy</h2>
  <div class="unit">…</div>
</div>

Missing the wrapping .grid class.

<!-- This element needs to always have the .grid class -->
<main>
  <div class="unit">…</div>
  <div class="unit">…</div>
</main>

Forgetting to close the .grid tag.

<div class="grid">
  <div class="unit">…</div>
  <div class="unit">…</div>

<!-- Because the above .grid isn’t closed, nothing will work properly -->
<div class="grid">
  <div class="unit">…</div>
  <div class="unit">…</div>
</div>

Having elements inside .grid but not inside .unit

<div class="grid">
  <!-- Don’t have elements directly inside the grid that aren’t .unit tags -->
  <main>
    <div class="unit">…</div>
    <div class="unit">…</div>
  </main>
</div>