Patterns: Grid

The basic grid structure is:

<div class="grid">
  <div class="grid__row">
    <div class="grid__col"></div>
    <div class="grid__col"></div>
  </div>
</div>

Add modifying classes to .grid__col for different widths etc.

All columns collapse to be full-width from 768px wide down.

Main and sub columns

They can also be used in the opposite order (or just have their presentation order changed using a modifier class; see below).

<div class="grid" style="margin-bottom: 1em;">
  <div class="grid__row">
    <div class="grid__col grid__col--main" style="background: #eee;">
      <p>Main column</p>
    </div>
    <div class="grid__col grid__col--sub" style="background: #ddd;">
      <p>Sub column</p>
    </div>
  </div>
</div>

A slight variant is to add the .grid__row--alt class to the .grid__row. This makes the main column wider and the sub column narrower:

<div class="grid" style="margin-bottom: 1em;">
  <div class="grid__row grid__row--alt">
    <div class="grid__col grid__col--main" style="background: #eee;">
      <p>Main column</p>
    </div>
    <div class="grid__col grid__col--sub" style="background: #ddd;">
      <p>Sub column</p>
    </div>
  </div>
</div>

Two equal columns

<div class="grid" style="margin-bottom: 1em;">
  <div class="grid__row">
    <div class="grid__col grid__col--half" style="background: #eee;">
      <p>Column 1</p>
    </div>
    <div class="grid__col grid__col--half" style="background: #ddd;">
      <p>Column 2</p>
    </div>
  </div>
</div>

Full-width column

<div class="grid" style="margin-bottom: 1em;">
  <div class="grid__row">
    <div class="grid__col grid__col--full" style="background: #eee;">
      <p>Full-width column</p>
    </div>
  </div>
</div>

Central column

The “main” column can be alone, and centered.

<div class="grid" style="margin-bottom: 1em;">
  <div class="grid__row">
    <div class="grid__col grid__col--main grid__col--main--only" style="background: #eee;">
      <p>Main column</p>
    </div>
  </div>
</div>

Change presentation order

Add .grid__col--first or .grid__col--last to the last and first columns respectively, to change the display order.

<div class="grid" style="margin-bottom: 1em;">
  <div class="grid__row">
    <div class="grid__col grid__col--main grid__col--last" style="background: #eee;">
      <p>Main column</p>
    </div>
    <div class="grid__col grid__col--sub grid__col--first" style="background: #ddd;">
      <p>Sub column</p>
    </div>
  </div>
</div>