Divided grid :: Digital Pattern Library

The classes o-grid__row--divided-rows and o-grid__row--divided-column can be added to the grid row to put a subtle divider between rows and/or colums.

It looks better when you combine it with an equal height row.

Because of the enormous complexity involved, please don't use responsive overrides on grid sizes

Divided rows

.o-grid__box--full

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--threequarters

.o-grid__box--quarter

.o-grid__box--third

.o-grid__box--twothirds

.o-grid__box--third

<div class="o-grid">
  <div class="o-grid__row o-grid__row--divided-rows">
    <div class="o-grid__box o-grid__box--full">
      .o-grid__box--full

    </div>
  </div>
  <div class="o-grid__row o-grid__row--divided-rows">
    <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 o-grid__row--divided-rows">
    <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 o-grid__row--divided-rows">
    <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 o-grid__row--divided-rows">
    <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 class="o-grid__row o-grid__row--divided-rows">
    <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 o-grid__row--divided-rows">
    <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 o-grid__row--divided-rows">
    <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 class="o-grid__row o-grid__row--divided-rows">
    <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 class="o-grid__row o-grid__row--divided-rows">
    <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 o-grid__row--divided-rows">
    <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>

Divided columns

.o-grid__box--full

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--threequarters

.o-grid__box--quarter

.o-grid__box--third

.o-grid__box--twothirds

.o-grid__box--third

<div class="o-grid">
  <div class="o-grid__row o-grid__row--divided-columns">
    <div class="o-grid__box o-grid__box--full">
      .o-grid__box--full

    </div>
  </div>
  <div class="o-grid__row o-grid__row--divided-columns">
    <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 o-grid__row--divided-columns">
    <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 o-grid__row--divided-columns">
    <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 o-grid__row--divided-columns">
    <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 class="o-grid__row o-grid__row--divided-columns">
    <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 o-grid__row--divided-columns">
    <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 o-grid__row--divided-columns">
    <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 class="o-grid__row o-grid__row--divided-columns">
    <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 class="o-grid__row o-grid__row--divided-columns">
    <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 o-grid__row--divided-columns">
    <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>

Divided rows and columns

.o-grid__box--full

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--half

.o-grid__box--quarter

.o-grid__box--threequarters

.o-grid__box--quarter

.o-grid__box--third

.o-grid__box--twothirds

.o-grid__box--third

<div class="o-grid">
  <div class="o-grid__row o-grid__row--divided-rows o-grid__row--divided-columns">
    <div class="o-grid__box o-grid__box--full">
      .o-grid__box--full

    </div>
  </div>
  <div class="o-grid__row o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 class="o-grid__row o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 class="o-grid__row o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 class="o-grid__row o-grid__row--divided-rows o-grid__row--divided-columns">
    <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 o-grid__row--divided-rows o-grid__row--divided-columns">
    <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>