🏗️ Grid Layout: Building Your Web City
Imagine you’re a city planner. You have a big piece of land, and you need to build a city with streets, buildings, parks, and shops. How do you organize everything so it looks neat and beautiful?
That’s exactly what CSS Grid does for websites!
Grid is like drawing invisible lines on your page—both across (horizontal) and up-down (vertical). These lines create little boxes called cells. You can put your content inside these cells, and everything stays perfectly organized!
🎯 What We’ll Learn Today
- Grid Container (The City Land)
- Grid Template Columns (Vertical Streets)
- Grid Template Rows (Horizontal Streets)
- Grid Column Span (Wide Buildings)
- Grid Row Span (Tall Buildings)
- Grid Column Start and End (Where Buildings Begin and End)
- Grid Row Start and End (Building Height Control)
1️⃣ Grid Container: The City Land
What is it?
Before you can build anything, you need LAND! The Grid Container is your piece of land. Everything you build goes inside it.
The Magic Word
<div class="grid">
<!-- Your city goes here! -->
</div>
When you add grid to a div, you’re saying: “This is my land. Let’s build a city!”
Real Example
<div class="grid">
<div>House 1</div>
<div>House 2</div>
<div>House 3</div>
</div>
Without grid: Houses are stacked on top of each other (boring!)
With grid: Houses can be arranged in rows and columns (organized!)
🎨 Think of it Like This
Grid Container = Empty parking lot Grid Items = Cars waiting to be parked
You draw the parking lines, and cars know exactly where to go!
2️⃣ Grid Template Columns: Vertical Streets
What is it?
Columns are the up-and-down dividers in your grid. Like vertical streets in a city!
Tailwind Classes
| Class | What it Does |
|---|---|
grid-cols-1 |
1 column |
grid-cols-2 |
2 equal columns |
grid-cols-3 |
3 equal columns |
grid-cols-4 |
4 equal columns |
grid-cols-12 |
12 equal columns |
Example: Photo Gallery
<div class="grid grid-cols-3">
<img src="cat1.jpg">
<img src="cat2.jpg">
<img src="cat3.jpg">
</div>
This creates 3 columns. Each photo gets its own column. Like a row of 3 picture frames on a wall!
🎨 Visual Flow
graph TD A[Grid Container] --> B[Column 1] A --> C[Column 2] A --> D[Column 3] B --> E[Item 1] C --> F[Item 2] D --> G[Item 3]
3️⃣ Grid Template Rows: Horizontal Streets
What is it?
Rows are the left-to-right dividers. Like horizontal streets crossing through your city!
Tailwind Classes
| Class | What it Does |
|---|---|
grid-rows-1 |
1 row |
grid-rows-2 |
2 rows |
grid-rows-3 |
3 rows |
grid-rows-6 |
6 rows |
Example: Calendar Grid
<div class="grid grid-cols-7 grid-rows-5">
<div>1</div>
<div>2</div>
<!-- ... days of month -->
</div>
This creates a calendar! 7 columns (days of week) and 5 rows (weeks).
🎨 Think of it Like This
Columns = Slices of a cake (vertical cuts) Rows = Layers of a cake (horizontal layers)
Together, they make a delicious grid cake! 🎂
4️⃣ Grid Column Span: Wide Buildings
What is it?
Some buildings are WIDE. They take up more than one block! Column span lets an item stretch across multiple columns.
Tailwind Classes
| Class | What it Does |
|---|---|
col-span-1 |
Takes 1 column (default) |
col-span-2 |
Stretches across 2 columns |
col-span-3 |
Stretches across 3 columns |
col-span-full |
Stretches across ALL columns |
Example: Website Header
<div class="grid grid-cols-4">
<div class="col-span-4">Header</div>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
</div>
The header stretches across all 4 columns like a banner at the top!
🎨 Visual
┌──────────────────────────────────┐
│ HEADER (col-span-4) │
├────────┬────────┬────────┬────────┤
│ Box 1 │ Box 2 │ Box 3 │ Box 4 │
└────────┴────────┴────────┴────────┘
5️⃣ Grid Row Span: Tall Buildings
What is it?
Some buildings are TALL. They take up more than one floor! Row span lets an item stretch across multiple rows.
Tailwind Classes
| Class | What it Does |
|---|---|
row-span-1 |
Takes 1 row (default) |
row-span-2 |
Stretches across 2 rows |
row-span-3 |
Stretches across 3 rows |
row-span-full |
Stretches across ALL rows |
Example: Sidebar Layout
<div class="grid grid-cols-4 grid-rows-3">
<div class="row-span-3">Sidebar</div>
<div class="col-span-3">Content 1</div>
<div class="col-span-3">Content 2</div>
<div class="col-span-3">Content 3</div>
</div>
The sidebar is a tall skyscraper going through all 3 floors!
🎨 Visual
┌────────┬─────────────────────────┐
│ │ Content 1 │
│ SIDE ├─────────────────────────┤
│ BAR │ Content 2 │
│ ├─────────────────────────┤
│ │ Content 3 │
└────────┴─────────────────────────┘
6️⃣ Grid Column Start and End
What is it?
Instead of just saying “stretch 2 columns,” you can say EXACTLY where to start and where to end. Like giving GPS coordinates!
Tailwind Classes
Start Classes:
| Class | Starts at Column |
|---|---|
col-start-1 |
Line 1 |
col-start-2 |
Line 2 |
col-start-3 |
Line 3 |
End Classes:
| Class | Ends at Column |
|---|---|
col-end-2 |
Line 2 |
col-end-3 |
Line 3 |
col-end-4 |
Line 4 |
Example: Precise Placement
<div class="grid grid-cols-4">
<div class="col-start-2 col-end-4">
Middle Section
</div>
</div>
This item starts at line 2 and ends at line 4. It skips the first column!
🎨 Understanding Grid Lines
Line 1 Line 2 Line 3 Line 4 Line 5
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
┌─────────┬─────────┬─────────┬─────────┐
│ Col 1 │ Col 2 │ Col 3 │ Col 4 │
└─────────┴─────────┴─────────┴─────────┘
Grid lines are like fence posts. Columns are the spaces BETWEEN the posts!
7️⃣ Grid Row Start and End
What is it?
Same idea as columns, but for rows! You can say exactly which row line to start at and which to end at.
Tailwind Classes
Start Classes:
| Class | Starts at Row |
|---|---|
row-start-1 |
Line 1 |
row-start-2 |
Line 2 |
row-start-3 |
Line 3 |
End Classes:
| Class | Ends at Row |
|---|---|
row-end-2 |
Line 2 |
row-end-3 |
Line 3 |
row-end-4 |
Line 4 |
Example: Feature Box
<div class="grid grid-rows-4 grid-cols-3">
<div class="row-start-1 row-end-3 col-span-2">
Big Feature
</div>
<div>Small 1</div>
<div>Small 2</div>
<div>Small 3</div>
</div>
The Big Feature box takes up rows 1-2 and spans 2 columns!
🏆 Putting It All Together
The Ultimate Layout
<div class="grid grid-cols-4 grid-rows-4 gap-2">
<!-- Header: Full Width -->
<header class="col-span-4">
Website Header
</header>
<!-- Sidebar: Tall -->
<aside class="row-span-2">
Sidebar
</aside>
<!-- Main Content: Wide and Tall -->
<main class="col-span-3 row-span-2">
Main Content Area
</main>
<!-- Footer: Full Width -->
<footer class="col-span-4">
Footer
</footer>
</div>
🎨 The Result
┌────────────────────────────────────┐
│ HEADER │
├────────┬───────────────────────────┤
│ │ │
│ SIDE │ MAIN CONTENT │
│ BAR │ │
│ │ │
├────────┴───────────────────────────┤
│ FOOTER │
└────────────────────────────────────┘
🎉 Quick Summary
| Concept | What it Does | Tailwind Class |
|---|---|---|
| Grid Container | Creates the grid | grid |
| Columns | Vertical dividers | grid-cols-{n} |
| Rows | Horizontal dividers | grid-rows-{n} |
| Column Span | Stretch horizontally | col-span-{n} |
| Row Span | Stretch vertically | row-span-{n} |
| Column Start/End | Precise horizontal position | col-start-{n} col-end-{n} |
| Row Start/End | Precise vertical position | row-start-{n} row-end-{n} |
💡 Remember This!
Grid is like a waffle maker. You create the pattern (rows and columns), then pour your content in. Each piece of content fills a square (or stretches across multiple squares if you want!).
You’re now ready to build amazing layouts! 🚀