---
title: Grid (Vanilla) - USWDS + Tailwind
description: Structure responsive page layouts with Tailwind CSS Grid, including
12-column layouts, gutters, offsets, and wrapping.
---
# Grid
Structure responsive page layouts with Tailwind CSS Grid, including 12-column layouts, gutters, offsets, and wrapping.
## Examples
### Grid Layout
```html
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
```
### Grid vs Flex
```html
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
```
### Gutters
```html
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)
```
### Column Offset
```html
1
2
3
4
5
6
7
8
9
10
11
12
(col-span-1)
.col-start-5.col-span-8
```
### Column Wrapping
```html
1
2
3
4
5
6
7
8
9
10
11
12
.col-span-8
.col-span-3
.col-span-5
```
### Responsive
Unlike components, layouts use viewport media queries (`.desktop:*`) instead of container queries (`.@desktop:*`). In order to demonstrate this, change the width of the browser window instead of the component example window.
```html