Grid layout

A mobile-first, float-based layout system.

Grid unit proportions

  • introduce columns as the content requires it – base column ratios on halves, thirds or quarters of the page width
  • for screen breakpoints use media queries – find these in the _conditionals.scss file

Grid unit proportions

Full width

<div class="gv-o-grid-row">
  <div class="gv-o-grid-item gv-u-full">
    <p>Content</p>
  </div>
</div>

Halves

<div class="gv-o-grid-row">
  <div class="gv-o-grid-item gv-u-one-half">
    <p>Content</p>
  </div>
  <div class="gv-o-grid-item gv-u-one-half">
    <p>Content</p>
  </div>
</div>

Thirds

<div class="gv-o-grid-row">
  <div class="gv-o-grid-item gv-u-one-third">
    <p>Content</p>
  </div>
  <div class="gv-o-grid-item gv-u-one-third">
    <p>Content</p>
  </div>
  <div class="gv-o-grid-item gv-u-one-third">
    <p>Content</p>
  </div>
</div>

Two thirds / One third

<div class="gv-o-grid-row">
  <div class="gv-o-grid-item gv-u-two-thirds">
    <p>Content</p>
  </div>
  <div class="gv-o-grid-item gv-u-one-third">
    <p>Content</p>
  </div>
</div>
<div class="gv-o-grid-row">
  <div class="gv-o-grid-item gv-u-one-third">
    <p>Content</p>
  </div>
  <div class="gv-o-grid-item gv-u-two-thirds">
    <p>Content</p>
  </div>
</div>

Quarters

<div class="gv-o-grid-row">
  <div class="gv-o-grid-item gv-u-one-quarter">
    <p>Content</p>
  </div>
  <div class="gv-o-grid-item gv-u-one-quarter">
    <p>Content</p>
  </div>
  <div class="gv-o-grid-item gv-u-one-quarter">
    <p>Content</p>
  </div>
  <div class="gv-o-grid-item gv-u-one-quarter">
    <p>Content</p>
  </div>
</div>