Open primary navigation
Origami Frontend Components & Services

Demos: o-grid

o-grid hasn't been branded yet, it only supports the master brand. If you would like to discuss having it branded please get in touch with the Origami team.

Default Grid

Grid with all default settings

Open demo in a new tab 
<!-- 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

Open demo in a new tab 
<!-- 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

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

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

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

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

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

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

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

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

GitHub Repository

Install o-grid

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

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

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