• Visual Language
  • Grid

Desktop grid

View Desktop grid

Usage notes

Grid systems are used for creating page layouts using a series of rows and columns that contain the page's content.

The pattern library includes a 6 column, responsive, mobile first, fluid grid system.

  
<h2>Desktop grid</h2>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-full-width">
    <code>Full width</code>
  </div>
</div>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-half">
    <code>One Half</code>
  </div>
  <div class="grid-col desktop-grid-one-half">
    <code>One half</code>
  </div>
</div>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-third">
    <code>One Third</code>
  </div>
  <div class="grid-col desktop-grid-two-thirds">
    <code>Two Thirds</code>
  </div>
</div>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-quarter">
    <code>One Quarter</code>
  </div>
  <div class="grid-col desktop-grid-three-quarters">
    <code>Three Quarters</code>
  </div>
</div>
<div class="grid-wrap">
  <div class="grid-col desktop-grid-one-sixth">
    <code>One Sixth</code>
  </div>
  <div class="grid-col desktop-grid-five-sixths">
    <code>Five Sixths</code>
  </div>
</div>

Developer Notes

This grid system is nestable (without squeezing fixed-width gutters), and has push/pull capability so the HTML source order is compatible with desktop and mobile layout.