grid

Grids

  1. Use .grid on your parent container for only the area you want to grid
  2. Use .g and a fraction class (e.g. ._1-2) on the child of the grid
  3. If you want responsive grids (different widths at different breakpoints), then suffix your fraction class with one of these: xs sm md lg. Any suffix you add will work for any breakpoint equal to or smaller (i.e. _1-2-lg will make a column that is 50% of its parent at large breakpoints and below)
  4. Responsive grids "overwrite" each other; that is, ._1-1-xs will take effect at the smallest breakpoint, even if you also include ._1-2-sm. This is how it is supposed to work. Examples to follow.

_1-2 column width

_1-4 column width

_1-4 column width

<section class="grid">
  <div class="g _1-2">
    <p class="p1 bg-gray">_1-2 column width</p>
  </div>
  <div class="g _1-4">
    <p class="p1 bg-gray">_1-4 column width</p>
  </div>
  <div class="g _1-4">
    <p class="p1 bg-gray">_1-4 column width</p>
  </div>
</section>
Responsive grids

1/4 at XL, 1/2 at LG to MD, 1/1 at SM and below

1/4 at XL, 1/2 at LG to MD, 1/1 at SM and below

1/4 at XL, 1/2 at LG to MD, 1/1 at SM and below

1/4 at XL, 1/2 at LG to MD, 1/1 at SM and below

<section class="grid">
  <div class="g _1-1-sm _1-2-lg _1-4">
    <p class="p1 bg-gray">1/4 at XL, 1/2 at LG to MD, 1/1 at SM and below</p>
  </div>
  <div class="g _1-1-sm _1-2-lg _1-4">
    <p class="p1 bg-gray">1/4 at XL, 1/2 at LG to MD, 1/1 at SM and below</p>
  </div>
  <div class="g _1-1-sm _1-2-lg _1-4">
    <p class="p1 bg-gray">1/4 at XL, 1/2 at LG to MD, 1/1 at SM and below</p>
  </div>
  <div class="g _1-1-sm _1-2-lg _1-4">
    <p class="p1 bg-gray">1/4 at XL, 1/2 at LG to MD, 1/1 at SM and below</p>
  </div>
</section>

Grid utility classes

Grid utility classes are used along side .grid.

Reverses grid direction from what is displayed in the markup

Content #1

Content #2

Content #3

<section class="grid grid-reverse">
  <div class="g _1-2">
    <p class="p1 bg-gray">Content #1</p>
  </div>
  <div class="g _1-4">
    <p class="p1 bg-gray">Content #2</p>
  </div>
  <div class="g _1-4">
    <p class="p1 bg-gray">Content #3</p>
  </div>
</section>
Centered grids

_1-6 column width

_1-3 column width

_1-6 column width

<section class="grid grid-c">
  <div class="g _1-6">
    <p class="p1 bg-gray">_1-6 column width</p>
  </div>
  <div class="g _1-3">
    <p class="p1 bg-gray">_1-3 column width</p>
  </div>
  <div class="g _1-6">
    <p class="p1 bg-gray">_1-6 column width</p>
  </div>
</section>
Right-align grids

_1-6 column width

_1-3 column width

_1-6 column width

<section class="grid grid-r">
  <div class="g _1-6">
    <p class="p1 bg-gray">_1-6 column width</p>
  </div>
  <div class="g _1-3">
    <p class="p1 bg-gray">_1-3 column width</p>
  </div>
  <div class="g _1-6">
    <p class="p1 bg-gray">_1-6 column width</p>
  </div>
</section>
Zero-gutter grids

_1-6 column width

_1-6 column width

_1-3 column width

_1-6 column width

_1-6 column width

<section class="grid grid-nopad">
  <div class="g _1-6">
    <p class="p1 bg-gray">_1-6 column width</p>
  </div>
  <div class="g _1-6">
    <p class="p1 bg-gray">_1-6 column width</p>
  </div>
  <div class="g _1-3">
    <p class="p1 bg-gray">_1-3 column width</p>
  </div>
  <div class="g _1-6">
    <p class="p1 bg-gray">_1-6 column width</p>
  </div>
  <div class="g _1-6">
    <p class="p1 bg-gray">_1-6 column width</p>
  </div>
</section>