Grid

SUIT CSS Grid Component

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>

With Gap

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>

Compact

Grid--withGap and Grid--withGutter can be combined with the Grid--compact modifier for smaller gaps and gutters.

This can be helpful when laying out compact responsive interfaces like forms.

Compact Gaps

A
B
C
D

Compact Gutters

A
B
C
D
<h2>Compact Gaps</h2>
      
      <div>
        <div class="Grid Grid--withGap Grid--compact">
          <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>
      </div>
      
      <h2>Compact Gutters</h2>
      
      <div>
        <div class="Grid Grid--withGutter Grid--compact">
          <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>
      </div>