Grid System

Grid

Use .Grid strictly as a container for cards. .Grid is designed mobile first, meaning any content contained within .Grid will stack in a single column by default. Using .Grid doesn't require a container or any extra spacing. Following '.Grid' you have only 2 options; use the modifier class .Grid--2 or Grid--3 to create either a two or a three column layout. That's all there is to it, pretty simple.

Note: The .grid--demo class has been added for the purpose of this demonstraion and should not be used in production.

1/1

1/1

1/1

1/2

1/2

1/2

1/2

1/3

1/3

1/3

1/3

1/3

1/3

<p class="mt3">Note: The <code>.grid--demo</code> class has been added for the purpose of this demonstraion and should not be used in production.</p>

<div class="border-grey mt5">
	<div class="pa5">

		<div class="Grid">
			<div class="Grid-item Grid--demo">
				<p>1/1</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/1</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/1</p>
			</div>
		</div>
		<!-- /.Grid -->

		<div class="Grid Grid--2 mt5">
			<div class="Grid-item Grid--demo">
				<p>1/2</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/2</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/2</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/2</p>
			</div>
		</div>
		<!-- /.Grid -->

		<div class="Grid Grid--3 mt5">
			<div class="Grid-item Grid--demo">
				<p>1/3</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/3</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/3</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/3</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/3</p>
			</div>
			<div class="Grid-item Grid--demo">
				<p>1/3</p>
			</div>
		</div>
		<!-- /.Grid -->

	</div>
	<!-- /.pa5 -->
</div>
<!-- /.border-grey -->

Flex

Use .Flex as the name suggests is a highly flexible flexbox grid with a number of options built in. For basic usage use .Flex-row to define a flex container, then assign child elements with Flex-column. Flex is responsive by default. To make a container ’non-responsive’ use Flex--nr after Flex-row.

Note: The .Flex--demo class has been added for the purpose of this demonstraion and should not be used in production.

100%
50%
50%
33.3%
33.3%
33.3%
25%
25%
25%
25%
20%
20%
20%
20%
20%
16.6%
16.6%
16.6%
16.6%
16.6%
16.6%
14.2%
14.2%
14.2%
14.2%
14.2%
14.2%
14.2%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%
11.1%
11.1%
11.1%
11.1%
11.1%
11.1%
11.1%
11.1%
11.1%
10%
10%
10%
10%
10%
10%
10%
10%
10%
10%
Twenty-five Percent
Seventy-five Percent 
<p class="mt3">Note: The <code>.Flex--demo</code> class has been added for the purpose of this demonstraion and should not be used in production.</p>

<div class="border-grey mt5">
	<div class="pa5">

		<div class="Flex">
			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					100%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					50%
				</div>
				<div class="Flex-column Flex--demo">
					50%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					33.3%
				</div>
				<div class="Flex-column Flex--demo">
					33.3%
				</div>
				<div class="Flex-column Flex--demo">
					33.3%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					25%
				</div>
				<div class="Flex-column Flex--demo">
					25%
				</div>
				<div class="Flex-column Flex--demo">
					25%
				</div>
				<div class="Flex-column Flex--demo">
					25%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					20%
				</div>
				<div class="Flex-column Flex--demo">
					20%
				</div>
				<div class="Flex-column Flex--demo">
					20%
				</div>
				<div class="Flex-column Flex--demo">
					20%
				</div>
				<div class="Flex-column Flex--demo">
					20%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					16.6%
				</div>
				<div class="Flex-column Flex--demo">
					16.6%
				</div>
				<div class="Flex-column Flex--demo">
					16.6%
				</div>
				<div class="Flex-column Flex--demo">
					16.6%
				</div>
				<div class="Flex-column Flex--demo">
					16.6%
				</div>
				<div class="Flex-column Flex--demo">
					16.6%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					14.2%
				</div>
				<div class="Flex-column Flex--demo">
					14.2%
				</div>
				<div class="Flex-column Flex--demo">
					14.2%
				</div>
				<div class="Flex-column Flex--demo">
					14.2%
				</div>
				<div class="Flex-column Flex--demo">
					14.2%
				</div>
				<div class="Flex-column Flex--demo">
					14.2%
				</div>
				<div class="Flex-column Flex--demo">
					14.2%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					12.5%
				</div>
				<div class="Flex-column Flex--demo">
					12.5%
				</div>
				<div class="Flex-column Flex--demo">
					12.5%
				</div>
				<div class="Flex-column Flex--demo">
					12.5%
				</div>
				<div class="Flex-column Flex--demo">
					12.5%
				</div>
				<div class="Flex-column Flex--demo">
					12.5%
				</div>
				<div class="Flex-column Flex--demo">
					12.5%
				</div>
				<div class="Flex-column Flex--demo">
					12.5%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
				<div class="Flex-column Flex--demo">
					11.1%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
				<div class="Flex-column Flex--demo">
					10%
				</div>
			</div>

			<div class="Flex-row">
				<div class="Flex-column Flex--demo Flex--25">
					Twenty-five Percent
				</div>
				<div class="Flex-column Flex--demo Flex--75">
					Seventy-five Percent
				</div>
			</div>
		</div>
		<!-- /.Flex -->

	</div>
	<!-- /.pa5 -->
</div>
<!-- /.border-grey -->

Flex Grid Nesting

Flex...

Nested
Nested
Nothing Nested 
<div class="border-grey mt5">
	<div class="pa5">

		<div class="Flex-row mt5">
			<div class="Flex-column Flex--demo">
				<div class="Flex-row Flex--nr">
					<div class="Flex-column Flex--demo">
						Nested
					</div>
					<div class="Flex-column Flex--demo">
						Nested
					</div>
				</div>
			</div>
			<div class="Flex-column Flex--demo">
				Nothing Nested
			</div>
		</div>

	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Flex Grid Uneven

Flex...

Twenty-five Percent
Twenty-five Percent
Fifty Percent
Seventy-five Percent
Twenty-five Percent 
<div class="border-grey mt5">
	<div class="pa5">

		<main class="mt5">
			<div class="Flex-row">
				<div class="Flex-column Flex--demo Flex--25">
					Twenty-five Percent
				</div>
				<div class="Flex-column Flex--demo Flex--25">
					Twenty-five Percent
				</div>
				<div class="Flex-column Flex--demo Flex--50">
					Fifty Percent
				</div>
			</div>
			<div class="Flex-row">
				<div class="Flex-column Flex--demo Flex--75">
					Seventy-five Percent
				</div>
				<div class="Flex-column Flex--demo Flex--25">
					Twenty-five Percent
				</div>
			</div>
		</main>

	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Flex Grid Horizontal Alignment

Flex...

Left / Center / Right content alignment

1/2
1/2
1/2 
<h2 class="mt5">Left / Center / Right content alignment</h2>

<div class="border-grey mt5">
	<div class="pa5">
		<div class="Flex-row mt5">
			<div class="Flex-column Flex--demo Flex-column--1of2">
				1/2
			</div>
		</div>
		<div class="Flex-row Flex--center">
			<div class="Flex-column Flex--demo Flex-column--1of2">
				1/2
			</div>
		</div>
		<div class="Flex-row  Flex--right">
			<div class="Flex-column Flex--demo Flex-column--1of2">
				1/2
			</div>
		</div>

	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

Flex Grid Vertical Alignment

Flex...

Vertical alignment per row

This row should be top-aligned.
Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug. Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.
This row should be center-aligned.
Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug. Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.
This row should be bottom-aligned.
Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug. Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.

Vertical alignment per column

Only this column should be top-aligned.
Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally. 
<h2 class="mt5">Vertical alignment per row</h2>
<div class="border-grey mt5">
	<div class="pa5">

		<div class="Flex-row Flex-row--top mt5">
			<div class="Flex-column Flex--demo">
				This row should be <strong>top-aligned</strong>.
			</div>
			<div class="Flex-column Flex--demo">
				Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
			</div>
			<div class="Flex-column Flex--demo">
				Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug.
				Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.
			</div>
		</div>
		<div class="Flex-row Flex-row--center">
			<div class="Flex-column Flex--demo">
				This row should be <strong>center-aligned</strong>.
			</div>
			<div class="Flex-column Flex--demo">
				Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
			</div>
			<div class="Flex-column Flex--demo">
				Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug.
				Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.
			</div>
		</div>
		<div class="Flex-row Flex-row--bottom">
			<div class="Flex-column Flex--demo">
				This row should be <strong>bottom-aligned</strong>.
			</div>
			<div class="Flex-column Flex--demo">
				Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
			</div>
			<div class="Flex-column Flex--demo">
				Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally, church-key 90's twee you probably haven't heard of them meh fixie cornhole banh mi pork belly mustache. Stumptown bespoke Vice, bitters sustainable hoodie Echo Park letterpress 8-bit pug.
				Quinoa meh flexitarian roof party, actually selvage Carles put a bird on it umami vegan ethical.
			</div>
		</div>

	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->

<h2 class="mt5">Vertical alignment per column</h2>
<div class="border-grey mt5">
	<div class="pa5">
		<div class="Flex-row mt5">
			<div class="Flex-column Flex--demo Flex-column--top">
				Only this column should be <strong>top-aligned</strong>.
			</div>
			<div class="Flex-column Flex--demo Flex-column--center">
				Vice keytar actually DIY Thundercats. Flannel heirloom lo-fi Blue Bottle Intelligentsia pour-over Etsy church-key banh mi Marfa lomo yr messenger bag.Artisan try-hard food truck +1 Cosby sweater.
			</div>
			<div class="Flex-column Flex--demo Flex-column--bottom">
				Letterpress YOLO Austin Pinterest Helvetica. Cliche pug literally.
			</div>
		</div>

	</div>
	<!--/.pa5 -->
</div>
<!--/.border-grey -->