Gridifier cheat sheet

Making a grid

  • .grid

    • Wraps around a whole grid row.

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

  • .unit

    • Defines an element as being a single grid module.

    • Can only be immediately inside a .grid element.

  • Example grid setup

    • <div class="grid">
        <div class="unit">…</div>
        <div class="unit">…</div>
      </div>
      
    • Nothing can be outside of .unit when using grids.

Grid unit alignment

  • .grid-bottom

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

  • .grid-middle

    • Vertically centers all the units inside a grid row.

  • .grid-stretch

    • Forces all the unit elements to be the same height.

Units

  • .unit-[size]-1, .[size]-1

    • Unit takes up one whole row.

  • .unit-[size]-1-2, .[size]-1-2

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

  • .unit-[size]-1-3, .[size]-1-3

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

  • .unit-[size]-2-3, .[size]-2-3

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

Unit size examples

These are just samples of what to expect for certain max column numbers.

  • 3-column grid sizes

    • .xs-1

    • .xs-1-2

    • .xs-1-3

    • .xs-2-3

  • 4-column grid sizes

    • .m-1

    • .m-1-2

    • .m-1-3

    • .m-2-3

    • .m-1-4

    • .m-3-4

    • Fractions are simplified, so 2/4 is 1/2.

  • 6-column grid sizes

    • .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 3/6 is 1/2.

Unit utilities

  • .unit-[size]-hidden, .[size]-0

    • Allows a unit to be hidden on specific screens sizes.

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

  • .unit-[size]-centered

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

    • e.g. .unit-m-centered

  • .unit-offset-[size]-[width]

    • 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

  • .unit-push-[size]-[width]

    • 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

  • .unit-pull-[size]-[width]

    • 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

  • .unit-content-distribute, .unit-[size]-content-distribute, .[size]-content-distribute

    • 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.

  • .content-fill, .[size]-content-fill

    • 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.

  • .content-shrink, .[size]-content-shrink

    • 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.

  • .unit-content-center, .unit-content-center-vertical, .unit-[size]-content-center, .unit-[size]-content-center-vertical

    • 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.

  • .unit-content-center-horizontal, .unit-[size]-content-center-horizontal

    • 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.

Example solutions

  • Grids inside grids

    • 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>
      
  • Aligning units to the middle or bottom

    • 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>
      
  • Distributing content within units

    • 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>
      
  • Hiding elements on certain screens

    • 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>
      
  • Using offsets to create open areas

    • 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>
      
  • Reordering elements with push & pull

    • 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>
      

Common problems

  • Smushy text

    • 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>
      
  • Units not responding properly

    • 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>