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:

---

2. Grid Column Counts

grid-cols-1

grid-cols-2

grid-cols-3

grid-cols-4

---

3. Column Spans (col-span-*)

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

---

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):

---

5. Gap Utilities

---

6. Flexbox Basics

Use flex for one-dimensional layouts: