CSS Grid

View Guidelines

You are viewing a grid fallback. This page will mimic grid as closely as it can.

Grid with Padding

Padded Grid Content
<!-- Grid with Padding -->
<div class="app-content grid-wrapper">
<div class="grid grid-padding"></div>
</div>

Grid Seperations

.grid--full
.grid--half
.grid--half
.grid--three-fourths
.grid--fourth
.grid--fourth
.grid--fourth
.grid--fourth
.grid--fourth
.grid--two-thirds
.grid--third
.grid--five-sixths
.grid--sixth
.grid--sixth
.grid--sixth
.grid--sixth
.grid--sixth
.grid--sixth
.grid--sixth
<!-- Grid Example -->
<div class="grid">
  <div class="grid--full">.grid--full</div>
  <div class="grid--half">.grid--half</div>
  <div class="grid--half">.grid--half</div>
  <div class="grid--three-fourths">.grid--three-fourths</div>
  <div class="grid--fourth">.grid--fourth</div>
  <div class="grid--fourth">.grid--fourth</div>
  <div class="grid--fourth">.grid--fourth</div>
  <div class="grid--fourth">.grid--fourth</div>
  <div class="grid--fourth">.grid--fourth</div>
  <div class="grid--two-thirds">.grid--two-thirds</div>
  <div class="grid--third">.grid--third</div>
  <div class="grid--five-sixth">.grid--five-sixth</div>
  <div class="grid--sixth">.grid--sixth</div>
  <div class="grid--sixth">.grid--sixth</div>
  <div class="grid--sixth">.grid--sixth</div>
  <div class="grid--sixth">.grid--sixth</div>
  <div class="grid--sixth">.grid--sixth</div>
  <div class="grid--sixth">.grid--sixth</div>
</div>

Nested Grids

.grid--full
.grid--half
.grid--half
.grid--half
.grid--half
.grid--fourth
.grid--two-thirds
.grid--third
.grid--sixth
.grid--third
.grid--third
.grid--third
.grid--two-thirds
.grid--third
<!-- Nested Grid Example -->
<div class="grid">
  <div class="grid--full">.grid--full</div>
  <div class="grid--half">.grid--half</div>
  <div class="grid--half">.grid--half</div>
  <div class="grid grid--three-fourths">
    <div class="grid--half">.grid--half</div>
    <div class="grid--half">.grid--half</div>
  </div>
  <div class="grid--fourth">.grid--fourth</div>
  <div class="grid--two-thirds">.grid--two-thirds</div>
  <div class="grid--third">.grid--third</div>
  <div class="grid--sixth">.grid--sixth</div>
  <div class="grid grid--five-sixths">
    <div class="grid--third">.grid--third</div>
    <div class="grid--third">.grid--third</div>
    <div class="grid--third">.grid--third</div>
    <div class="grid--two-thirds">.grid--two-thirds</div>
    <div class="grid--third">.grid--third</div>
  </div>
</div>

Grid in and with Cards

Card Header (.grid--full)

.grid--full
.grid--half
.grid--half

Card Header (.grid--half)

.grid--two-thirds
.grid--third
.grid--two-thirds
.grid--third

Card Header (.grid--half)

Some Information
LINK
More Information
LINK
<!-- Grid in and with Cards Example -->
<div class="grid">

  <div class="grid--full">
    <div class="card">
      <div class="card--header"><h3>Card Header (.grid--full)</h3></div>
      <div class="card--content">
        <div class="grid">
          <div class="grid--full">.grid--full</div>
          <div class="grid--half">.grid--half</div>
          <div class="grid--half">.grid--half</div>
        </div>
      </div>
    </div>
  </div>

  <div class="grid--half">
    <div class="card">
      <div class="card--header"><h3>Card Header (.grid--half)</h3></div>
      <div class="card--content">
        <div class="grid">
          <div class="grid--two-thirds">.grid--two-thirds</div>
          <div class="grid--third">.grid--third</div>
          <div class="grid--two-thirds">.grid--two-thirds</div>
          <div class="grid--third">.grid--third</div>
        </div>
      </div>
    </div>
  </div>

  <div class="grid--half">
    <div class="card">
      <div class="card--header"><h3>Card Header (.grid--half)</h3></div>
      <div class="card--content">
        <div class="grid">
          <div class="grid--two-thirds">Some Information</div>
          <div class="grid--third align-right"><a href="#">LINK</a></div>
          <div class="grid--two-thirds">More Information</div>
          <div class="grid--third align-right"><a href="#">LINK</a></div>
        </div>
      </div>
    </div>
  </div>

</div>