Chapter 26: CSS Grid
CSS Grid, which is (together with Flexbox) one of the two most powerful modern layout systems in CSS — and in 2026 it is used in almost every serious project for anything that needs two-dimensional control (rows and columns at the same time).
Flexbox is great when you want to arrange things in one direction (row or column). Grid is perfect when you want to control both directions simultaneously — think:
- full-page layouts (header, sidebar, main content, footer)
- photo galleries
- dashboards
- pricing tables
- complex card grids
- forms with aligned labels & inputs
- anything that feels like a table but should not be a <table>
Let’s learn it properly — slow, clear, with lots of explanations and a real, playable example you can copy-paste right now.
1. The Core Idea of CSS Grid
Two main players:
- Grid Container (the parent) → gets display: grid
- Grid Items (direct children) → automatically placed into the grid cells
You define:
- how many rows and columns you want
- how wide/tall each track (row or column) should be
- where each child should go (or let auto-placement do the work)
2. Most Important Properties (All on the Parent = Grid Container)
| Property | Most common values / examples | What it actually does (very clearly) |
|---|---|---|
| display | grid or inline-grid | Turns the element into a grid container |
| grid-template-columns | 1fr 1fr 1fr, repeat(3, 1fr), 200px auto 300px | Defines column tracks (how many & how wide) |
| grid-template-rows | auto, 100px 200px, repeat(4, minmax(150px, auto)) | Defines row tracks (how many & how tall) |
| grid-template | Shorthand: grid-template-rows / grid-template-columns | Write rows and columns in one line |
| gap / row-gap / column-gap | 20px, 1.5rem, 1em 2em | Space between grid cells (replaces margin hacks) |
| justify-items | start, center, end, stretch (default) | Horizontal alignment inside each cell |
| align-items | start, center, end, stretch (default) | Vertical alignment inside each cell |
| place-items | Shorthand for align-items justify-items | One line for both |
| justify-content | start, center, space-between, space-around, space-evenly | Distributes extra horizontal space when total columns < container width |
| align-content | same as above | Distributes extra vertical space when total rows < container height |
3. Placing Items (Two Main Ways)
Way 1: Auto-placement (easiest — let browser do the work)
Just put items in HTML order — grid fills row-by-row (default) or column-by-column.
CSS
|
0 1 2 3 4 5 6 7 8 9 10 |
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } |
Way 2: Explicit placement with line numbers
You name the grid lines or use numbers:
CSS
|
0 1 2 3 4 5 6 7 8 9 |
.item { grid-column: 1 / 3; /* starts at column line 1, ends before line 3 → spans 2 columns */ grid-row: 2 / 4; /* spans rows 2 and 3 */ } |
Or with named areas (very clean for page layouts):
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.grid-container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; } |
4. Real, Practical CSS Grid Example (Full Page Layout + Card Grid)
index.html
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Grid Explained – Webliance</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="grid-page"> <header class="header"> <div class="container"> <h1>Webliance</h1> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Projects</a> <a href="#">Contact</a> </nav> </div> </header> <aside class="sidebar"> <h2>Sidebar</h2> <ul> <li>Dashboard</li> <li>Settings</li> <li>Profile</li> <li>Logout</li> </ul> </aside> <main class="main-content"> <h2>Main Content Area</h2> <p>This is the flexible main area using grid-template-columns.</p> <div class="card-grid"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> <div class="card">Card 5</div> <div class="card">Card 6</div> </div> </main> <footer class="footer"> <div class="container"> <p>© 2026 Webliance • Built with Chai & CSS Grid</p> </div> </footer> </div> </body> </html> |
style.css (focused on Grid)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
* { margin:0; padding:0; box-sizing:border-box; } body { font-family: system-ui, sans-serif; background: #f8fafc; color: #1e293b; min-height: 100vh; } .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; } /* ── Full page grid layout ── */ .grid-page { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header header" "sidebar main" "footer footer"; min-height: 100vh; } .header { grid-area: header; background: #1e40af; color: white; padding: 1.5rem 0; } .header .container { display: flex; justify-content: space-between; align-items: center; } .header nav a { color: white; margin-left: 2rem; text-decoration: none; } .sidebar { grid-area: sidebar; background: #f1f5f9; padding: 2rem; border-right: 1px solid #e2e8f0; } .main-content { grid-area: main; padding: 2.5rem; } .footer { grid-area: footer; background: #0f172a; color: #94a3b8; text-align: center; padding: 2rem 0; } /* ── Card grid inside main ── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem; } .card { background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 6px 20px rgba(0,0,0,0.08); text-align: center; min-height: 160px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.3rem; } |
What You Should See & Play With
- Full page layout — header & footer full width, sidebar fixed 250px, main takes remaining space
- Responsive cards — repeat(auto-fit, minmax(280px, 1fr)) → automatically creates as many columns as fit, wraps beautifully on mobile
- Resize browser → sidebar stays, main content shrinks/grows, cards reflow
- Try changing grid-template-columns: 300px 1fr → sidebar gets wider
- Remove grid-template-areas and use line numbers instead — see how it still works
Quick Grid Mastery Checklist (2026)
- Always start with display: grid on parent
- Use fr unit for flexible tracks (1fr 2fr = second column twice as wide)
- Use auto-fit + minmax() for responsive card grids
- Use grid-template-areas for named, readable page layouts
- gap > manual margins (cleaner & prevents double spacing)
- Combine with Flexbox — Grid for overall structure, Flexbox for inside components
How does the page behave when you make the browser narrow? Sidebar still readable? Cards stacking nicely?
Next steps — tell me what you want:
- “Grid deep dive – 10 real patterns (gallery, dashboard, form layout…)”
- “Combine Flexbox + Grid in one project”
- “Responsive grid with media queries”
- “grid-auto-flow, dense packing, named lines”
- “common Grid mistakes & how to fix them”
You’ve just learned the second pillar of modern layout (Flexbox was the first). Together they can build almost anything. Chai khatam? Fresh cup le aao — let’s keep going! 🚀 😄
