Day 3 - Grid Layout

Master Tailwind's powerful CSS Grid and Flexbox utilities for responsive layouts.

1. CSS Grid — The Basics

Use grid + grid-cols-{n} to create column layouts:

1
2
3
4
5
6
7
8
9
10
11
12

2. Grid Column Counts

grid-cols-1

col

grid-cols-2

col
col

grid-cols-3

col
col
col

grid-cols-4

col
col
col
col

3. Column Spans (col-span-*)

Use col-span-{n} to make an item span multiple columns:

col-span-6 + col-span-6 (in a 12-col grid)

col-span-6
col-span-6

col-span-4 + col-span-4 + col-span-4

col-span-4
col-span-4
col-span-4

col-span-3 + col-span-6 + col-span-3

col-span-3
col-span-6
col-span-3

4. Responsive Grid

Use breakpoint prefixes for mobile-first responsive layouts:

<!-- 1 col mobile, 2 cols tablet, 3 cols desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

Resize your browser to see columns change (current demo is always 3):

Card 1

Visible on all screens

Card 2

Side-by-side on md+

Card 3

Third column on lg+

Card 4

Wraps to new row

Card 5

Auto-wrapping grid

Card 6

No row divs needed

5. Gap Utilities

gap-1 (4px)

1
2
3

gap-4 (16px)

1
2
3

gap-8 (32px)

1
2
3

6. Flexbox Basics

Use flex for one-dimensional layouts:

flex justify-between items-center

Left
Center
Right

flex justify-center gap-4

Item 1
Item 2
Item 3

flex flex-col gap-2

Top
Middle
Bottom
← Previous: Containers Next: Images →