Grid

Create complex, responsive, grid layouts effortlessly. Define a grid container with the .grid class and populate it with any number of .grid-item elements. Simples.

Define the width of your grid items in your CSS, to keep stylistic markup out of your html, or attach responsive width utility classes to your .grid-item elements. There is no need to define grid rows, or to clearfix anything, just grid-n’-go!

* The demo leans on the .alert class to provide styling. It’s not required so not included in the markup examples.

Example HTML

<div class="grid">

  <div class="grid-item one-half"></div>
  <div class="grid-item one-half"></div>

  <div class="grid-item one-third"></div>
  <div class="grid-item one-third"></div>
  <div class="grid-item one-third"></div>

  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>

  <div class="grid-item one-fifth"></div>
  <div class="grid-item one-fifth"></div>
  <div class="grid-item one-fifth"></div>
  <div class="grid-item one-fifth"></div>
  <div class="grid-item one-fifth"></div>

  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
  <div class="grid-item one-sixth"></div>
</div>

Padded grids

Create horizontal gutters between your grid items with the add-on class .grid--padded.

Example HTML

<div class="grid grid--padded">
  <div class="grid-item one-half"></div>
  <div class="grid-item one-half"></div>

  <div class="grid-item one-third"></div>
  <div class="grid-item one-third"></div>
  <div class="grid-item one-third"></div>

  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
  <div class="grid-item one-quarter"></div>
</div>

Nested grids

Want more than six-columns in your regular grid? No problem, grids are nestable. Just nest a new .grid inside a .grid-item, as in this example where a nine-column grid is constructed using the width class .one-third.

<div class="grid">
  <div class="grid-item one-third">
    <div class="grid">
      <div class="grid-item one-third"></div>
    </div>
  </div>
  <div class="grid-item one-third">
    <div class="grid">
      <div class="grid-item one-third"></div>
      <div class="grid-item one-third"></div>
    </div>
  </div>
  <div class="grid-item one-third">
    <div class="grid">
      <div class="grid-item one-third"></div>
      <div class="grid-item one-third"></div>
      <div class="grid-item one-third"></div>
    </div>
  </div>
</div>