Skip to main content
Logo USWDS + Tailwind

Grid

Use our flexible grid system to structure website content. The grid is mobile-first, powered by flexbox, and based on a 12-column system.

Examples

Grid Layout

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
1
2
3
4
5
6
7
8
9
10
11
12
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
.col-span-4
.col-span-4
.col-span-4
.tablet:col-span-4
.tablet:col-span-4
.tablet:col-span-4
Twig 
<div class="space-y-4">


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
		{% for i in 1..12 %}
			<div class="flex justify-center leading-none">{{i}}</div>
		{% endfor %}
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-3">
		<div class="bg-blue-warm-10 p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black">
			(col-span-1)
		</div>
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-4">
		<div class="bg-blue-warm-10 p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black">
			(col-span-1)
		</div>
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12">
		<div class="bg-blue-warm-10 p-4 border border-black col-span-4">
			.col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-4">
			.col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-4">
			.col-span-4
		</div>
	</div>


	<div class="mx-auto max-w-screen-desktop grid tablet:grid-cols-12">
		<div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-4">
			.tablet:col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-4">
			.tablet:col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-4">
			.tablet:col-span-4
		</div>
	</div>
</div>

Grid vs Flex

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
1
2
3
4
5
6
7
8
9
10
11
12
grid
(col-span-1)
(col-span-1)
(col-span-1)
flex
.w-1/3
.w-1/3
.w-1/3
flex & gap
.w-1/3
.w-1/3
.w-1/3
flex auto size
(w-auto)
(w-auto)
(w-auto)
.w-1/4
.w-1/4
.w-1/4
.w-1/4
flex fill
(w-auto)
.flex-1
flex fill multiple
.flex-1
.flex-1
.flex-1
Twig 
<div class="space-y-4">


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
		{% for i in 1..12 %}
			<div class="flex justify-center leading-none">{{i}}</div>
		{% endfor %}
	</div>


	<div>
		<div class="mx-auto max-w-screen-desktop">
			grid
		</div>
		<div class="mx-auto max-w-screen-desktop grid grid-cols-3 gap-4">
			<div class="bg-blue-warm-10 p-4 border border-black">
				(col-span-1)
			</div>
			<div class="bg-blue-warm-10 p-4 border border-black">
				(col-span-1)
			</div>
			<div class="bg-blue-warm-10 p-4 border border-black">
				(col-span-1)
			</div>
		</div>
	</div>


	<div>
		<div class="mx-auto max-w-screen-desktop">
			flex
		</div>
		<div class="mx-auto max-w-screen-desktop flex flex-wrap">
			<div class="bg-red-warm-10 p-4 border border-black w-1/3">
				.w-1/3
			</div>
			<div class="bg-red-warm-10 p-4 border border-black w-1/3">
				.w-1/3
			</div>
			<div class="bg-red-warm-10 p-4 border border-black w-1/3">
				.w-1/3
			</div>
		</div>
	</div>


	<div>
		<div class="mx-auto max-w-screen-desktop">
			flex & gap
		</div>
		<div class="mx-auto max-w-screen-desktop flex flex-wrap gap-4">
			<div class="bg-red-warm-10 p-4 border border-black w-1/3">
				.w-1/3
			</div>
			<div class="bg-red-warm-10 p-4 border border-black w-1/3">
				.w-1/3
			</div>
			<div class="bg-red-warm-10 p-4 border border-black w-1/3">
				.w-1/3
			</div>
		</div>
	</div>


	<div>
		<div class="mx-auto max-w-screen-desktop">
			flex auto size
		</div>
		<div class="mx-auto max-w-screen-desktop flex flex-wrap">
			<div class="bg-red-warm-10 p-4 border border-black">
				(w-auto)
			</div>
			<div class="bg-red-warm-10 p-4 border border-black">
				(w-auto)
			</div>
			<div class="bg-red-warm-10 p-4 border border-black">
				(w-auto)
			</div>
			<div class="bg-red-warm-10 p-4 border border-black w-1/4">
				.w-1/4
			</div>
			<div class="bg-red-warm-10 p-4 border border-black w-1/4">
				.w-1/4
			</div>
			<div class="bg-red-warm-10 p-4 border border-black w-1/4">
				.w-1/4
			</div>
			<div class="bg-red-warm-10 p-4 border border-black w-1/4">
				.w-1/4
			</div>
		</div>
	</div>


	<div>
		<div class="mx-auto max-w-screen-desktop">
			flex fill
		</div>
		<div class="mx-auto max-w-screen-desktop flex flex-wrap">
			<div class="bg-red-warm-10 p-4 border border-black">
				(w-auto)
			</div>
			<div class="bg-red-warm-10 p-4 border border-black flex-1">
				.flex-1
			</div>
		</div>
	</div>


	<div>
		<div class="mx-auto max-w-screen-desktop">
			flex fill multiple
		</div>
		<div class="mx-auto max-w-screen-desktop flex flex-wrap">
			<div class="bg-red-warm-10 p-4 border border-black flex-1">
				.flex-1
			</div>
			<div class="bg-red-warm-10 p-4 border border-black flex-1">
				.flex-1
			</div>
			<div class="bg-red-warm-10 p-4 border border-black flex-1">
				.flex-1
			</div>
		</div>
	</div>


</div>

Gutters

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
1
2
3
4
5
6
7
8
9
10
11
12
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
(col-span-1)
Twig 
<div class="space-y-4">


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
		{% for i in 1..12 %}
			<div class="flex justify-center leading-none">{{i}}</div>
		{% endfor %}
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-3 gap-4 bg-blue-warm-10">
		<div class="bg-white p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-white p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-white p-4 border border-black">
			(col-span-1)
		</div>
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-3 gap-8 bg-blue-warm-10">
		<div class="bg-white p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-white p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-white p-4 border border-black">
			(col-span-1)
		</div>
	</div>


</div>

Column Offset

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
1
2
3
4
5
6
7
8
9
10
11
12
(col-span-1)
.col-start-5.col-span-8
Twig 
<div class="space-y-4">


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
		{% for i in 1..12 %}
			<div class="flex justify-center leading-none">{{i}}</div>
		{% endfor %}
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12">
		<div class="bg-blue-warm-10 p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-start-5 col-span-8">
			.col-start-5.col-span-8
		</div>
	</div>
</div>

Column Wrapping

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
1
2
3
4
5
6
7
8
9
10
11
12
.col-span-8
.col-span-3
.col-span-5
Twig 
<div class="space-y-4">


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
		{% for i in 1..12 %}
			<div class="flex justify-center leading-none">{{i}}</div>
		{% endfor %}
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12">
		<div class="bg-blue-warm-10 p-4 border border-black col-span-8">
			.col-span-8
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-3">
			.col-span-3
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-5">
			.col-span-5
		</div>
	</div>
</div>

Responsive

Unlike components, layouts use viewport media queries instead of container queries. In order to demonstrate this, change the width of the browser window instead of the component example window.

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
1
2
3
4
5
6
7
8
9
10
11
12
(col-span-1)
.col-span-2
.col-span-3
.col-span-4
.col-span-2
.tablet:col-span-8
.tablet:col-span-2
.tablet:col-span-2
.tablet:col-span-8
.col-span-6.tablet:col-span-4
.col-span-6.tablet:col-span-4
.col-span-6.tablet:col-span-4
.col-span-6.tablet:col-span-4
.col-span-6
.col-span-6
Twig 
<div class="space-y-4">


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12 divide-x divide-red-30 border-x border-x-red-30">
		{% for i in 1..12 %}
			<div class="flex justify-center leading-none">{{i}}</div>
		{% endfor %}
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12">
		<div class="bg-blue-warm-10 p-4 border border-black">
			(col-span-1)
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-2">
			.col-span-2
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-3">
			.col-span-3
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-4">
			.col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-2">
			.col-span-2
		</div>
	</div>


	<div class="mx-auto max-w-screen-desktop grid tablet:grid-cols-12">
		<div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-8">
			.tablet:col-span-8
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-2">
			.tablet:col-span-2
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black tablet:col-span-2">
			.tablet:col-span-2
		</div>
	</div>


	<div class="mx-auto max-w-screen-desktop grid grid-cols-12">
		<div class="bg-blue-warm-10 p-4 border border-black col-span-full tablet:col-span-8">
			.tablet:col-span-8
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-6 tablet:col-span-4">
			.col-span-6.tablet:col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-6 tablet:col-span-4">
			.col-span-6.tablet:col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-6 tablet:col-span-4">
			.col-span-6.tablet:col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-6 tablet:col-span-4">
			.col-span-6.tablet:col-span-4
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-6">
			.col-span-6
		</div>
		<div class="bg-blue-warm-10 p-4 border border-black col-span-6">
			.col-span-6
		</div>
	</div>
</div>