Origami Frontend Components & Services

Demos: o-grid

This version of o-grid hasn't been branded yet. Please check the latest version, 4.5.3, 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>
Switch component view

GitHub Repository

Install o-grid

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

If running a Manual Build, run bower install --save "o-grid@^4.4.4".

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