o-grid

Grid for responsive layouts

active

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>
Bower Dependencies
sass-mq sass-mq#^3.1.0
GitHub Repository

Quickstart

Build Service

Add the following to your <script> and <link> tags.

o-grid@^4.3.6

How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-grid"@"^4.3.6"

For more information see the Origami build process.