Design

Grid

Columns can easily be created based on a 12 column grid by using the following classes (Based on CSS grid). The following classes can be used to align items inside a flex parent.

NOTE: These classes can be appended with breakpoint modifiers to allow different a amount of columns on different screen sizes.

One Column

Grid Item 
  
  <div class="grid-parent">
    <div>
      Grid Item
    </div>
  </div>

Two Columns (50-50)

Grid Item
Grid Item 
  
  <div class="grid-parent grid-parent--base-6-6">
    <div>
      Grid Item
    </div>
    <div>
      Grid Item
    </div>
  </div>

Three Columns (Thirds)

Grid Item
Grid Item
Grid Item 
  
  <div class="grid-parent grid-parent--base-4-4-4">
    <div>
      Grid Item
    </div>
    <div>
      Grid Item
    </div>
    <div>
      Grid Item
    </div>
  </div>

Two Columns (Offset)

Grid Item
Grid Item 
  
  <div class="grid-parent grid-parent--base-5-7">
    <div>
      Grid Item
    </div>
    <div>
      Grid Item
    </div>
  </div>