📘 Lesson · Lesson 27
CSS Grid Complete
CSS Grid Complete
What Grid Is
CSS Grid is the tool for two-dimensional layouts — rows AND columns at the same time. Where flexbox arranges items in ONE direction (a row or a column), grid handles BOTH directions together, like a spreadsheet or a chessboard. This makes it perfect for whole-page layouts, image galleries, and card grids where you need control over both horizontal and vertical placement. Grid and flexbox aren't rivals — they're partners: grid for the overall 2D structure, flexbox for arranging items within each area.
Making a Grid — display grid + columns
.container {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 columns, each 200px */
}
/* The direct children automatically fill the grid cells, left to right,
wrapping to a new row when the columns run out */┌───────┬───────┬───────┐
│ item1 │ item2 │ item3 │ ← 3 columns defined
├───────┼───────┼───────┤
│ item4 │ item5 │ item6 │ ← extra items wrap to new rows automatically
└───────┴───────┴───────┘
It starts with
display: grid plus grid-template-columns, which defines your columns. Listing three values (200px 200px 200px) creates three columns of that width. The children then flow into these cells automatically — and when a row fills up, extra items wrap to a new row. Rows are created automatically as needed. Unlike flexbox where you think in one flow direction, here you DEFINE the column structure up front, and items pour into it.The fr Unit and repeat() — grid's superpowers
/* fr = "fraction" of available space - grid's special flexible unit */
grid-template-columns: 1fr 1fr 1fr; /* 3 EQUAL flexible columns */
grid-template-columns: 1fr 2fr; /* col 2 is twice as wide as col 1 */
/* repeat() - avoid typing the same thing over and over */
grid-template-columns: repeat(3, 1fr); /* same as 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */Two features that make grid a joy: The
fr unit means "a fraction of the available space" — 1fr 1fr 1fr makes three columns that share the space equally and flex with the screen (far better than fixed px for responsive layouts). Ratios work too: 1fr 2fr makes the second column twice as wide. repeat(3, 1fr) is shorthand for writing 1fr three times — essential when you have many equal columns. Together, repeat(3, 1fr) is the everyday way to make a clean, equal, flexible multi-column layout.gap and Auto-Responsive Grids
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}gap works just like in flexbox — even spacing between all grid cells, rows and columns, in one line. But the real magic is that responsive one-liner above: repeat(auto-fit, minmax(250px, 1fr)) means "fit as many columns as possible, each at least 250px wide but flexing up to fill space." The result is a card grid that AUTOMATICALLY adjusts the number of columns to the screen — 4 columns on desktop, 2 on tablet, 1 on phone — with zero media queries. This single line is one of the most powerful things in all of CSS; it makes truly responsive galleries almost effortless.Grid vs Flexbox — which to use
| Use | Best tool |
|---|---|
| Items in ONE row or column | Flexbox |
| Navigation bar, button group | Flexbox |
| 2D layout (rows AND columns) | Grid |
| Image gallery / card grid | Grid |
| Whole page layout | Grid (often with flexbox inside) |
The simple rule: flexbox for one dimension, grid for two. If you're laying things out in a single line (a nav bar, a row of buttons), flexbox is simpler. If you need control over both rows and columns at once (a gallery, a page layout, a dashboard), grid is the tool. In real projects you use BOTH constantly — grid to define the big page regions, then flexbox to arrange the content inside each region. They're a team, not competitors. Learn both and you can build any layout.
Exam Corner
Q: What is CSS Grid best for? Two-dimensional layouts — rows and columns together.
Q: How do you create three equal flexible columns?
Q: What does the fr unit mean? A fraction of the available space (flexible sizing).
Q: What makes a grid auto-adjust columns to screen size?
Q: Grid vs flexbox — the simple rule? Flexbox for one dimension (row/column); grid for two (rows and columns).
Q: How do you create three equal flexible columns?
display: grid; grid-template-columns: repeat(3, 1fr);Q: What does the fr unit mean? A fraction of the available space (flexible sizing).
Q: What makes a grid auto-adjust columns to screen size?
repeat(auto-fit, minmax(250px, 1fr)).Q: Grid vs flexbox — the simple rule? Flexbox for one dimension (row/column); grid for two (rows and columns).
Grid क्या है
CSS Grid दो-आयामी layouts का tool है — rows AUR columns एक साथ. जहां flexbox items को EK दिशा में सजाता है (row या column), grid दोनों दिशाएं एक साथ संभालता है, spreadsheet या शतरंज की बिसात जैसा. यह इसे पूरे-page layouts, image galleries, और card grids के लिए perfect बनाता है जहां horizontal और vertical दोनों placement पर control चाहिए. Grid और flexbox प्रतिद्वंद्वी नहीं — साथी हैं: overall 2D structure के लिए grid, हर area के अंदर items सजाने को flexbox.
Grid बनाना — display grid + columns
.container {
display: grid;
grid-template-columns: 200px 200px 200px; /* 3 columns, har 200px */
}
/* Direct children apne aap grid cells bharte hain, left to right,
columns khatam hone par nayi row me wrap hote */┌───────┬───────┬───────┐
│ item1 │ item2 │ item3 │ ← 3 columns defined
├───────┼───────┼───────┤
│ item4 │ item5 │ item6 │ ← extra items apne aap nayi rows me wrap
└───────┴───────┴───────┘
यह
display: grid और grid-template-columns से शुरू होता है, जो आपके columns define करता है. तीन values (200px 200px 200px) उस width के तीन columns बनाती हैं. फिर children इन cells में अपने आप बहते हैं — और row भरने पर extra items नई row में wrap होते हैं. Rows ज़रूरत के अनुसार अपने आप बनती हैं. Flexbox के उलट जहां आप एक flow दिशा में सोचते हैं, यहां आप column structure पहले से DEFINE करते हैं, और items उसमें उंडेलते हैं.fr Unit और repeat() — grid की superpowers
/* fr = available space ka "fraction" - grid ka special flexible unit */
grid-template-columns: 1fr 1fr 1fr; /* 3 SAMAAN flexible columns */
grid-template-columns: 1fr 2fr; /* col 2, col 1 se dugna chauda */
/* repeat() - same cheez baar-baar likhne se bacho */
grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr jaisa hi */
grid-template-columns: repeat(4, 1fr); /* 4 samaan columns */दो features जो grid को आनंद बनाते हैं:
fr unit मतलब "उपलब्ध space का एक अंश" — 1fr 1fr 1fr तीन columns बनाता है जो space समान रूप से share करते और screen के साथ flex होते (responsive layouts के लिए fixed px से कहीं बेहतर). Ratios भी चलते हैं: 1fr 2fr दूसरे column को दोगुना चौड़ा बनाता है. repeat(3, 1fr) 1fr तीन बार लिखने का shorthand है — जब कई समान columns हों ज़रूरी. साथ में, repeat(3, 1fr) साफ, समान, flexible multi-column layout बनाने का रोज़ का तरीका है.gap और Auto-Responsive Grids
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}gap flexbox जैसा ही काम करता है — सारे grid cells, rows और columns के बीच समान spacing, एक line में. पर असली जादू ऊपर वाला responsive one-liner है: repeat(auto-fit, minmax(250px, 1fr)) मतलब "जितने columns संभव हों fit करो, हर एक कम से कम 250px चौड़ा पर space भरने को flex होते." नतीजा एक card grid जो screen के हिसाब से columns की संख्या अपने आप adjust करता है — desktop पर 4 columns, tablet पर 2, phone पर 1 — शून्य media queries के साथ. यह एक line पूरी CSS की सबसे ताकतवर चीज़ों में से एक है; यह सच में responsive galleries लगभग बिना मेहनत बनाती है.Grid vs Flexbox — कौन-सा use करें
| Use | Best tool |
|---|---|
| EK row या column में items | Flexbox |
| Navigation bar, button group | Flexbox |
| 2D layout (rows AUR columns) | Grid |
| Image gallery / card grid | Grid |
| पूरे page का layout | Grid (अक्सर अंदर flexbox के साथ) |
सरल rule: एक आयाम के लिए flexbox, दो के लिए grid. अगर एक line में चीज़ें lay out कर रहे हैं (nav bar, buttons की row), flexbox सरल है. अगर rows और columns दोनों पर एक साथ control चाहिए (gallery, page layout, dashboard), grid tool है. असली projects में आप DONO लगातार use करते हैं — बड़े page regions define करने को grid, फिर हर region के अंदर content सजाने को flexbox. वे team हैं, प्रतिद्वंद्वी नहीं. दोनों सीखिए और कोई भी layout बना सकते हैं.
Exam Corner
Q: CSS Grid किसके लिए best है? दो-आयामी layouts — rows और columns साथ.
Q: तीन समान flexible columns कैसे बनाते हैं?
Q: fr unit का क्या मतलब? उपलब्ध space का एक अंश (flexible sizing).
Q: Grid को screen size के हिसाब से columns auto-adjust कौन कराता है?
Q: Grid vs flexbox — सरल rule? एक आयाम के लिए flexbox (row/column); दो के लिए grid (rows और columns).
Q: तीन समान flexible columns कैसे बनाते हैं?
display: grid; grid-template-columns: repeat(3, 1fr);Q: fr unit का क्या मतलब? उपलब्ध space का एक अंश (flexible sizing).
Q: Grid को screen size के हिसाब से columns auto-adjust कौन कराता है?
repeat(auto-fit, minmax(250px, 1fr)).Q: Grid vs flexbox — सरल rule? एक आयाम के लिए flexbox (row/column); दो के लिए grid (rows और columns).
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.