Grid System

Basic Usage

Our grid system is flexbox based, the simplest usage is to add the amount of blocks you want inside the row, the columns will fill the space evenly.

col

    <div class="row">
      <div class="block">col</div>
      <div class="block">col</div>
      <div class="block">col</div>
      <div class="block">col</div>
    </div>

Column Widths

block

    <div class="row">
      <div class="block block--five-sixths"></div>
      <div class="block block--sixth"></div>
    </div>
    <div class="row">
      <div class="block block--four-fifths"></div>
      <div class="block block--fifth"></div>
    </div>
    <div class="row">
      <div class="block block--three-quarters"></div>
      <div class="block block--quarter"></div>
    </div>
    <div class="row">
      <div class="block block--two-thirds"></div>
      <div class="block block--third"></div>
    </div>
    <div class="row">
      <div class="block block--half"></div>
      <div class="block block--half"></div>
    </div>

Responsive Columns

Table Needed - Display media queries and its effect on each column

Extra Block Modifiers

Centered Contents

You can center the contents of a block by adding the block--centered modifier

Column Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Linkage

      <div class="block block--centered"></div>

Aligning Row Columns

Adding an alignment modifier to a row lets you change how the columns within the row are vertically aligned.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

    <div class="row row--align-center"></div>
    <div class="row row--align-end"></div>

Justifying Row Columns

Adding a justify modifier to a row lets you change how the columns within the row are horizontally justified.

Start

Center

End

Space Between

Space Around

    <div class="row row--justify-start"></div>
    <div class="row row--justify-center"></div>
    <div class="row row--justify-end"></div>
    <div class="row row--justify-between"></div>
    <div class="row row--justify-around"></div>