Grid

A flexbox based grid system component.

grid + grid__item

...
...
...
<div class="grid">
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
</div>

grid__item_fill

The fill modifier stretches a grid item’s contents to fill it’s container.

...
...
...
<div class="grid">
  <div class="grid__item" style="height: 200px;">...</div>
  <div class="grid__item grid__item_fill">...</div>
  <div class="grid__item">...</div>
</div>

grid__clear

The clear element allows you to start a new row at any point in a column set.

...
...
...
...
...
<div class="grid">
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
  <div class="grid__clear"></div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
</div>

grid_auto

Gives grid items a basis of auto so their content dictates their width.

...
...
...
...
...
<div class="grid grid_auto">
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
  <div class="grid__item">...</div>
</div>

grid_hori_[value]

Adjust the vertical orientation of grid columns. Best used along with the grid_auto modifier. Avaliable values are:

  • grid_hori_start
  • grid_hori_center
  • grid_hori_end
  • grid_hori_between
...
...
<div class="grid grid_hori_start">...</div>
...
...
<div class="grid grid_hori_center">...</div>
...
...
<div class="grid grid_hori_end">...</div>
...
...
<div class="grid grid_hori_between">...</div>

grid_vert_[value]

Adjust the vertical orientation of grid columns. Avaliable values are:

  • grid_vert_start
  • grid_vert_center
  • grid_vert_end
...
...
<div class="grid grid_vert_start">
  <div class="grid__item" style="height: 100px;">...</div>
  <div class="grid__item">...</div>
</div>
...
...
<div class="grid grid_vert_center">
  <div class="grid__item" style="height: 100px;">...</div>
  <div class="grid__item">...</div>
</div>
...
...
<div class="grid grid_vert_end">
  <div class="grid__item" style="height: 100px;">...</div>
  <div class="grid__item">...</div>
</div>

grid_break_[breakpoint]

Adds a breakpoint for when grid items should be stacked vertically. Also available is the grid_break modifier which stacks grid items under all conditions.

...
...
...
...
...
...
...
...
...
...
...
...
<div class="grid grid_break">...</div>
<div class="grid grid_break_xs">...</div>
<div class="grid grid_break_sm">...</div>
<div class="grid grid_break_md">...</div>
<div class="grid grid_break_lg">...</div>
<div class="grid grid_break_xl">...</div>

grid_gap_[type]

Modifiers that adjust the gutters between content tracks.

...
...
...
...
...
...
...
<div class="grid grid_gap_none">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_xs">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_sm">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_md">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_lg">...</div>
...
...
...
...
...
...
...
<div class="grid grid_gap_xl">...</div>