<div class="layout-3col {{modifier_class}}">
  <div class="layout-3col__full">
    The <code>.layout-3col__full</code> grid item.
  </div>
  <div class="layout-3col__left-content">
    The <code>.layout-3col__left-content</code> grid item.
  </div>
  <div class="layout-3col__right-sidebar">
    The <code>.layout-3col__right-sidebar</code> grid item.
  </div>
  <div class="layout-3col__right-content">
    The <code>.layout-3col__right-content</code> grid item.
  </div>
  <div class="layout-3col__left-sidebar">
    The <code>.layout-3col__left-sidebar</code> grid item.
  </div>
  <div class="layout-3col__col-1">
    The <code>.layout-3col__col-1</code> grid item.
  </div>
  <div class="layout-3col__col-2">
    The <code>.layout-3col__col-2</code> grid item.
  </div>
  <div class="layout-3col__col-3">
    The <code>.layout-3col__col-3</code> grid item. Don't forget to look for the <code>.layout-3col__col-4</code> grid item at tablet sizes.
  </div>
  <div class="layout-3col__col-4">
    The <code>.layout-3col__col-4</code> grid item.
  </div>
  <div class="layout-3col__full layout-3col__grid-item-container">
    <div class="layout-3col__col-x">
      The first <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The second <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The third <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The fourth <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The fifth <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
    <div class="layout-3col__col-x">
      The sixth <code>.layout-3col__col-x</code> grid item in this nested grid.
    </div>
  </div>
</div>
