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>
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 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>