Grid

This project offers a very full-featured, Flexbox-powered component for rapidly arranging columns of items responsively in combination with available size utilities.

  • Grid: core component
  • Grid--alignCenter: center-align all child Grid-cell
  • Grid--alignRight: right-align all child Grid-cell
  • Grid--alignMiddle: middle-align all child Grid-cell
  • Grid--alignBottom: bottom-align all child Grid-cell
  • Grid--fit: evenly distribute space amongst all child Grid-cell
  • Grid--equalHeight: all child Grid-cell match height of the tallest
  • Grid--withGutter: adds a gutter between cells
  • Grid-cell: a child cell of Grid that wraps grid content
  • Grid-cell--center: center an individual Grid-cell
A
B
<div class="Grid Grid--withGutter">
  <div class="Grid-cell u-sizeFill">
    <div class="u-pad1 u-textCenter" style="background: #E7E7E9;">A</div>
  </div>
  <div class="Grid-cell u-sizeFill">
    <div class="u-pad1 u-textCenter" style="background: #E7E7E9;">B</div>
  </div>
</div>

In addition to the standard modifiers, this project adds a Grid--withGap modifier. This works similarly to Grid--withGutter, except it adds visual gaps vertically as well as horizontally.

A
B
C
D
<div class="Grid Grid--withGap">
  <div class="Grid-cell u-size1of2 u-lg-size1of4">
    <div class="u-pad1 u-textCenter" style="background: #E7E7E9;">A</div>
  </div>
  <div class="Grid-cell u-size1of2 u-lg-size1of4">
    <div class="u-pad1 u-textCenter" style="background: #E7E7E9;">B</div>
  </div>
  <div class="Grid-cell u-size1of2 u-lg-size1of4">
    <div class="u-pad1 u-textCenter" style="background: #E7E7E9;">C</div>
  </div>
  <div class="Grid-cell u-size1of2 u-lg-size1of4">
    <div class="u-pad1 u-textCenter" style="background: #E7E7E9;">D</div>
  </div>
</div>