Origami Frontend Components & Services

Demos: o-grid

This version of o-grid hasn't been branded yet. Please check the latest version, 6.0.0-beta.0, as branding is a relatively new addition to our components.

Default

Grid with all default settings

<!-- Constant column spans -->
<div class="o-grid-container">
  <div class="o-grid-row">
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
  </div>
  <div class="o-grid-row o-grid-row--compact">
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="12"><div class="demo-cell">12</div></div>
  </div>

  <!-- Responsive column spans -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="8 S12 M8">
      <div class="demo-cell">
        <span data-demo-highlight="default">8</span>
        <span data-demo-highlight="S">S12</span>
        <span data-demo-highlight="M L XL">M8</span>

        <div class="o-grid-row">
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-o-grid-colspan="4 S12 M4">
      <div class="demo-cell">
        <span data-demo-highlight="default">4</span>
        <span data-demo-highlight="S">S12</span>
        <span data-demo-highlight="M L XL">M4</span>

        <div class="o-grid-row">
          <div data-o-grid-colspan="12 L7 XL6">
            <div class="demo-cell">
              <span data-demo-highlight="default S M">12</span>
              <span data-demo-highlight="L">L7</span>
              <span data-demo-highlight="XL">XL6</span>
            </div>
          </div>
          <div data-o-grid-colspan="12 L5 XL6">
            <div class="demo-cell">
              <span data-demo-highlight="default S M">12</span>
              <span data-demo-highlight="L">L5</span>
              <span data-demo-highlight="XL">XL6</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Human friendly modifiers -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-half">
      <div class="demo-cell">one-half</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="two-thirds">
      <div class="demo-cell">two-thirds</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third push8">
      <div class="demo-cell">one-third push8 (first in source)</div>
    </div>
    <div data-o-grid-colspan="two-thirds pull4">
      <div class="demo-cell">two-thirds pull4 (last in source)</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third center">
      <div class="demo-cell">one-third center</div>
    </div>
  </div>

  <!-- Stacked, wrapping columns -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-half">
      <div class="demo-cell">one-half</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="two-thirds">
      <div class="demo-cell">two-thirds</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="full-width">
      <div class="demo-cell">full-width</div>
    </div>
    <div data-o-grid-colspan="full-width">
      <div class="demo-cell">full-width</div>
    </div>
  </div>
</div>

<p style="text-align: center">With container bleed:</p>

<div class="o-grid-container o-grid-container--bleed">
  <div class="o-grid-row">
    <div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
  </div>
  <div class="o-grid-row o-grid-row--compact">
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
  </div>
</div>

Snappy

Responsive grid that snaps between a larger fixed layout at each breakpoint

<!-- Constant column spans -->
<div class="o-grid-container">
  <div class="o-grid-row">
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
  </div>
  <div class="o-grid-row o-grid-row--compact">
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="12"><div class="demo-cell">12</div></div>
  </div>

  <!-- Responsive column spans -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="8 S12 M8">
      <div class="demo-cell">
        <span data-demo-highlight="default">8</span>
        <span data-demo-highlight="S">S12</span>
        <span data-demo-highlight="M L XL">M8</span>

        <div class="o-grid-row">
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-o-grid-colspan="4 S12 M4">
      <div class="demo-cell">
        <span data-demo-highlight="default">4</span>
        <span data-demo-highlight="S">S12</span>
        <span data-demo-highlight="M L XL">M4</span>

        <div class="o-grid-row">
          <div data-o-grid-colspan="12 L7 XL6">
            <div class="demo-cell">
              <span data-demo-highlight="default S M">12</span>
              <span data-demo-highlight="L">L7</span>
              <span data-demo-highlight="XL">XL6</span>
            </div>
          </div>
          <div data-o-grid-colspan="12 L5 XL6">
            <div class="demo-cell">
              <span data-demo-highlight="default S M">12</span>
              <span data-demo-highlight="L">L5</span>
              <span data-demo-highlight="XL">XL6</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Human friendly modifiers -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-half">
      <div class="demo-cell">one-half</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="two-thirds">
      <div class="demo-cell">two-thirds</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third push8">
      <div class="demo-cell">one-third push8 (first in source)</div>
    </div>
    <div data-o-grid-colspan="two-thirds pull4">
      <div class="demo-cell">two-thirds pull4 (last in source)</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third center">
      <div class="demo-cell">one-third center</div>
    </div>
  </div>

  <!-- Stacked, wrapping columns -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-half">
      <div class="demo-cell">one-half</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="two-thirds">
      <div class="demo-cell">two-thirds</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="full-width">
      <div class="demo-cell">full-width</div>
    </div>
    <div data-o-grid-colspan="full-width">
      <div class="demo-cell">full-width</div>
    </div>
  </div>
</div>

<p style="text-align: center">With container bleed:</p>

<div class="o-grid-container o-grid-container--bleed">
  <div class="o-grid-row">
    <div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
  </div>
  <div class="o-grid-row o-grid-row--compact">
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
  </div>
</div>

Resized

Responsive grid with breakpoints reallocated to 400px, 800px and 1000px and gutters halved

<!-- Constant column spans -->
<div class="o-grid-container">
  <div class="o-grid-row">
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
  </div>
  <div class="o-grid-row o-grid-row--compact">
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="12"><div class="demo-cell">12</div></div>
  </div>

  <!-- Responsive column spans -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="8 S12 M8">
      <div class="demo-cell">
        <span data-demo-highlight="default">8</span>
        <span data-demo-highlight="S">S12</span>
        <span data-demo-highlight="M L XL">M8</span>

        <div class="o-grid-row">
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-o-grid-colspan="4 S12 M4">
      <div class="demo-cell">
        <span data-demo-highlight="default">4</span>
        <span data-demo-highlight="S">S12</span>
        <span data-demo-highlight="M L XL">M4</span>

        <div class="o-grid-row">
          <div data-o-grid-colspan="12 L7 XL6">
            <div class="demo-cell">
              <span data-demo-highlight="default S M">12</span>
              <span data-demo-highlight="L">L7</span>
              <span data-demo-highlight="XL">XL6</span>
            </div>
          </div>
          <div data-o-grid-colspan="12 L5 XL6">
            <div class="demo-cell">
              <span data-demo-highlight="default S M">12</span>
              <span data-demo-highlight="L">L5</span>
              <span data-demo-highlight="XL">XL6</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Human friendly modifiers -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-half">
      <div class="demo-cell">one-half</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="two-thirds">
      <div class="demo-cell">two-thirds</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third push8">
      <div class="demo-cell">one-third push8 (first in source)</div>
    </div>
    <div data-o-grid-colspan="two-thirds pull4">
      <div class="demo-cell">two-thirds pull4 (last in source)</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third center">
      <div class="demo-cell">one-third center</div>
    </div>
  </div>

  <!-- Stacked, wrapping columns -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-half">
      <div class="demo-cell">one-half</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="two-thirds">
      <div class="demo-cell">two-thirds</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="full-width">
      <div class="demo-cell">full-width</div>
    </div>
    <div data-o-grid-colspan="full-width">
      <div class="demo-cell">full-width</div>
    </div>
  </div>
</div>

<p style="text-align: center">With container bleed:</p>

<div class="o-grid-container o-grid-container--bleed">
  <div class="o-grid-row">
    <div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
  </div>
  <div class="o-grid-row o-grid-row--compact">
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
  </div>
</div>

Always-fixed

Fixed grid at 610px across all browsers and devices. Should always be fixed at the large layout

<!-- Constant column spans -->
<div class="o-grid-container">
  <div class="o-grid-row">
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
    <div data-o-grid-colspan="1"><div class="demo-cell">1</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
    <div data-o-grid-colspan="2"><div class="demo-cell">2</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
    <div data-o-grid-colspan="3"><div class="demo-cell">3</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
    <div data-o-grid-colspan="4"><div class="demo-cell">4</div></div>
  </div>
  <div class="o-grid-row o-grid-row--compact">
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="12"><div class="demo-cell">12</div></div>
  </div>

  <!-- Responsive column spans -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="8 S12 M8">
      <div class="demo-cell">
        <span data-demo-highlight="default">8</span>
        <span data-demo-highlight="S">S12</span>
        <span data-demo-highlight="M L XL">M8</span>

        <div class="o-grid-row">
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
          <div data-o-grid-colspan="6 S12 M6 XL3">
            <div class="demo-cell">
              <span data-demo-highlight="default">6</span>
              <span data-demo-highlight="S">S12</span>
              <span data-demo-highlight="M L">M6</span>
              <span data-demo-highlight="XL">XL3</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div data-o-grid-colspan="4 S12 M4">
      <div class="demo-cell">
        <span data-demo-highlight="default">4</span>
        <span data-demo-highlight="S">S12</span>
        <span data-demo-highlight="M L XL">M4</span>

        <div class="o-grid-row">
          <div data-o-grid-colspan="12 L7 XL6">
            <div class="demo-cell">
              <span data-demo-highlight="default S M">12</span>
              <span data-demo-highlight="L">L7</span>
              <span data-demo-highlight="XL">XL6</span>
            </div>
          </div>
          <div data-o-grid-colspan="12 L5 XL6">
            <div class="demo-cell">
              <span data-demo-highlight="default S M">12</span>
              <span data-demo-highlight="L">L5</span>
              <span data-demo-highlight="XL">XL6</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Human friendly modifiers -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-half">
      <div class="demo-cell">one-half</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="two-thirds">
      <div class="demo-cell">two-thirds</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third push8">
      <div class="demo-cell">one-third push8 (first in source)</div>
    </div>
    <div data-o-grid-colspan="two-thirds pull4">
      <div class="demo-cell">two-thirds pull4 (last in source)</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third center">
      <div class="demo-cell">one-third center</div>
    </div>
  </div>

  <!-- Stacked, wrapping columns -->
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-half">
      <div class="demo-cell">one-half</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
    <div data-o-grid-colspan="one-quarter">
      <div class="demo-cell">one-quarter</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="one-third">
      <div class="demo-cell">one-third</div>
    </div>
    <div data-o-grid-colspan="two-thirds">
      <div class="demo-cell">two-thirds</div>
    </div>
  </div>
  <div class="o-grid-row">
    <div data-o-grid-colspan="full-width">
      <div class="demo-cell">full-width</div>
    </div>
    <div data-o-grid-colspan="full-width">
      <div class="demo-cell">full-width</div>
    </div>
  </div>
</div>

<p style="text-align: center">With container bleed:</p>

<div class="o-grid-container o-grid-container--bleed">
  <div class="o-grid-row">
    <div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6</div></div>
  </div>
  <div class="o-grid-row o-grid-row--compact">
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
    <div data-o-grid-colspan="6"><div class="demo-cell">6 (compact)</div></div>
  </div>
</div>
Status
active Origami v1
Switch component view

GitHub Repository

Install o-grid

If using the Build Service, add o-grid@^4.3.7 to your script and link tags.

If running a Manual Build, run npm install "o-grid@^4.3.7".

Help & Support

o-grid is maintained directly by the Origami team. If you have any questions about o-grid or Origami in general, we are happy to help. 😊

Slack: #ft-origami
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #ft-origami
Email: origami.support@ft.com