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, as branding is a relatively new addition to our components.

Default Grid

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 Grid

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>

Responsive Grid

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>

Fixed Grid

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
Switch component view

GitHub Repository

Install o-grid

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

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-grid@^6.0.0-beta.0".

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: #origami-support
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: #origami-support
Email: origami.support@ft.com