Note that the grid is used for layout only, and holds no details as to the contents of the grid box. Other components should be included within the grid boxes.

A note about the responsive grid

So how does the grid respond on smaller screens?

• .o-grid__box--full: stays full width always
• .o-grid__box--half: goes to 100% width on medium (<840px)
• .o-grid__box--threequarters: go to 100% width on medium
• .o-grid__box--quarter: It's complicated. In general, it will go to 50% width on medium, then 100% width on small (<640px). On medium, when you have a half between two quarters in a row (q+h+q), the last quarter is moved up above the half, as otherwise you'd have 50% + 100% + 50% width. When a quarter is in a row with a three-quarter (q+tq or tq+q), the quarter will become 100% on medium too, to fit with the three-quarter
• .o-grid__box--third: stays 33.333% of width until small, when it goes full-width
• .o-grid__box--twothirds: stays 66.666% of width until small, when it goes full-width

All grid boxes (any bit of code at all, in fact) can be given a .mobile-hidden and/or .tablet-hidden class, which will hide that box on mobile and/or tablet. This can cause layout issues if you aren't careful.

You can also override grid sizes by adding a custom @ class to a grid box: for example, .o-grid__box--quarter@small will go to quarter width on small (and lower) screens regardless of its usual class.

N.B. There is normally no background colour or margin on grid boxes. It is just there for the documentation.

The default is to have a box that takes up the whole width:

<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--full">
      .o-grid__box--full (default)

    </div>
  </div>
</div>

Quarter-, half- and three-quarter-width columns are possible:

<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--half">
      .o-grid__box--half

    </div>
    <div class="o-grid__box o-grid__box--half">
      .o-grid__box--half

    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--threequarters">
      .o-grid__box--threequarters

    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--threequarters">
      .o-grid__box--threequarters

    </div>
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
  </div>
</div>

And you can combine quarter- and half-width grid boxes to fit a row:

<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--half">
      .o-grid__box--half

    </div>
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--half">
      .o-grid__box--half

    </div>
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--half">
      .o-grid__box--half

    </div>
  </div>
</div>

You can also split the grid into thirds:

<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third">
      .o-grid__box--third

    </div>
    <div class="o-grid__box o-grid__box--third">
      .o-grid__box--third

    </div>
    <div class="o-grid__box o-grid__box--third">
      .o-grid__box--third

    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--twothirds">
      .o-grid__box--twothirds

    </div>
    <div class="o-grid__box o-grid__box--third">
      .o-grid__box--third

    </div>
  </div>
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third">
      .o-grid__box--third

    </div>
    <div class="o-grid__box o-grid__box--twothirds">
      .o-grid__box--twothirds

    </div>
  </div>
</div>

Finally, here's a (slightly convoluted) way of nesting grids (for example, on a gallery page):

<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--quarter">
      .o-grid__box--quarter

    </div>
    <div class="o-grid__box o-grid__box--threequarters">
      <div class="o-grid">
        <div class="o-grid__row">
          <div class="o-grid__box o-grid__box--third">
            <div class="o-grid">
              <div class="o-grid__row">
                <div class="o-grid__box o-grid__box--full">
                  You can even triple-nest!

                </div>
              </div>
              <div class="o-grid__row">
                <div class="o-grid__box o-grid__box--half">
                  .o-grid__box--half

                </div>
                <div class="o-grid__box o-grid__box--half">
                  .o-grid__box--half

                </div>
              </div>
            </div>

          </div>
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
        </div>
        <div class="o-grid__row">
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
        </div>
        <div class="o-grid__row">
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
          <div class="o-grid__box o-grid__box--third">
            .o-grid__box--third

          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Responsive override classes

As mentioned above, you can override the default response of the grid items by giving them an @ class. So the following grid items would usually go from being a 33.333% wide at medium size to 100% width at small size, but the .o-grid__box--third@small class means they will stay a third wide even at small screen sizes. You can also specify an @print variation that only affects print layouts.

<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third o-grid__box--third@small">
      .o-grid__box--third.o-grid__box--third@small

    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--third@small">
      .o-grid__box--third.o-grid__box--third@small

    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--third@small">
      .o-grid__box--third.o-grid__box--third@small

    </div>
  </div>
</div>

You can play around with the different displays by assigning these classes.

(Try resizing and printing the following example. The boxes should be thirds at huge and large sizes, full/half/half at medium, full/full/full (default) at small and tiny, and half/quarter/quarter in print).

<div class="o-grid">
  <div class="o-grid__row">
    <div class="o-grid__box o-grid__box--third o-grid__box--full@medium o-grid__box--half@print">
      .o-grid__box--third<br>.o-grid__box--full@medium<br>.o-grid__box--half@print

    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--half@medium o-grid__box--quarter@print">
      .o-grid__box--third<br>.o-grid__box--half@medium<br>.o-grid__box--quarter@print

    </div>
    <div class="o-grid__box o-grid__box--third o-grid__box--half@medium o-grid__box--quarter@print">
      .o-grid__box--third<br>.o-grid__box--half@medium<br>.o-grid__box--quarter@print

    </div>
  </div>
</div>

Options

Atoms

• grid-box
  • size: one of full (default), half, quarter, threequarters, third and twothirds
  • atoms: an array of components (atoms, molecules, organisms)

Molecules

• grid-row
  • atoms: an array of grid-boxes. The sizes of the grid-boxes should add up to one. Duh.
  • type: either alt1, alt2, alt3 for alternative styles of row. Also divided-rows or divided-columns
  • image: what image should fill the row?

Organisms

• grid
  • atoms: an array of grid-rows.