Alternative grid :: Digital Pattern Library

You can make fancy alternative coloured rows where the whole row turns either blue, teal or light grey (including the space going off the screen on either side) by defining the row as .o-grid__row--alt1, .o-grid__row--alt2 or .o-grid__row--alt3.

.o-grid__box--full

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

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

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

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

Bordered rows

Add a thick border to the bottom of the row by using the class .o-grid__row--bordered. It works especially well on alt rows.

.o-grid__box--full

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

    </div>
  </div>
  <div class="o-grid__row o-grid__row--alt1 o-grid__row--bordered">
    <div class="o-grid__box o-grid__box--full">
      .o-grid__box--full

    </div>
  </div>
  <div class="o-grid__row o-grid__row--alt2 o-grid__row--bordered">
    <div class="o-grid__box o-grid__box--full">
      .o-grid__box--full

    </div>
  </div>
  <div class="o-grid__row o-grid__row--alt3 o-grid__row--bordered">
    <div class="o-grid__box o-grid__box--full">
      .o-grid__box--full

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