📐 Days 7–12 – Layout और Responsive Design · दिन 09
दिन 9: CSS Grid 1: Rows, Columns और Gaps
⏱ 90 min📶 Intermediate🎯 100% self-study
दिन 9 / 20
✅ आज आप सीखेंगे
- Grid container, tracks, lines, cells और areas
- fr और repeat() के साथ grid-template-columns / rows
- gap, justify-items / align-items / place-items से alignment
- Items रखना: grid-column, grid-row, span
- repeat(auto-fit, minmax()) – बिना media queries responsive
🏢 असली दुनिया में
एक photographer client चाहती है कि उसकी portfolio gallery laptop पर एक row में 4, tablet पर 2 और phone पर 1 photo दिखाए, हर photo एक size की और gaps सही। Flexbox में यह सावधान गणित है; Grid में CSS की एक line। आज dashboards, galleries और पूरे page layouts Grid से बनते हैं।
एक तस्वीर में Grid
HTML + CSS
<style>
.grid > div { background: #264de4; color: #fff; padding: 12px; border-radius: 8px; font: 600 13px system-ui; }
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
gap: 10px;
}
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>| शब्द | मतलब |
|---|---|
| Grid container | display: grid वाला element |
| Track | एक row या एक column |
| Line | Tracks के बीच क्रमांकित रेखाएँ (1 से शुरू) |
| Cell | Row और column के मिलने का एक खाना |
| Area | एक या अधिक cells का आयत |
| fr | ख़ाली जगह का एक हिस्सा |
Columns और rows बनाना
HTML + CSS
<style>
.grid > div { background: #264de4; color: #fff; padding: 12px; border-radius: 8px; font: 600 13px system-ui; }
.grid { display: grid; gap: 8px; margin-bottom: 10px; }
.a { grid-template-columns: 200px 1fr; } /* fixed sidebar + fluid */
.b { grid-template-columns: 1fr 2fr 1fr; } /* middle twice as wide */
.c { grid-template-columns: repeat(4, 1fr); } /* 4 equal */
.d { grid-template-columns: repeat(3, 1fr); grid-template-rows: 60px 100px; }
</style>
<div class="grid a"><div>200px</div><div>1fr</div></div>
<div class="grid b"><div>1fr</div><div>2fr</div><div>1fr</div></div>
<div class="grid c"><div>1</div><div>2</div><div>3</div><div>4</div></div>
<div class="grid d"><div>row 60px</div><div>row 60px</div><div>row 60px</div><div>row 100px</div><div>row 100px</div><div>row 100px</div></div>💡 fr बनाम %
fr gaps और fixed tracks के बाद बची जगह बाँटता है, इसलिए gap: 20px के साथ 1fr 1fr 1fr पूरी तरह fit होता है। 33.33% columns + gaps बाहर निकलते हैं – Flexbox दौर का आम bug।
Lines और span से items रखना
HTML + CSS
<style>
.grid > div { background: #264de4; color: #fff; padding: 12px; border-radius: 8px; font: 600 13px system-ui; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 70px; gap: 8px; }
.grid > .big { grid-column: 1 / 3; grid-row: 1 / 3; background: #c2410c; } /* lines 1→3 */
.grid > .wide { grid-column: span 2; background: #0891b2; } /* 2 columns */
.grid > .tall { grid-row: span 2; background: #16a34a; }
.grid > .full { grid-column: 1 / -1; background: #111827; } /* edge to edge */
</style>
<div class="grid">
<div class="big">big: column 1/3, row 1/3</div><div>2</div><div class="tall">tall: span 2 rows</div>
<div>4</div><div class="wide">wide: span 2</div><div>6</div>
<div class="full">full: 1 / -1</div>
</div>| Property | उदाहरण | मतलब |
|---|---|---|
| grid-column | 1 / 3 | Line 1 से line 3 तक (2 columns) |
| grid-column | span 2 | जहाँ भी हो वहाँ से 2 columns |
| grid-column | 1 / -1 | पहली से आख़िरी line = पूरी चौड़ाई |
| grid-auto-rows | minmax(120px, auto) | अपने-आप बनी rows की ऊँचाई |
| grid-auto-flow | dense | बड़े items के छोड़े छेद भरना |
Cells के अंदर alignment
HTML + CSS
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 90px; gap: 8px; background: #eef2ff; padding: 8px; border-radius: 10px; }
.grid div { background: #264de4; color: #fff; padding: 6px 10px; border-radius: 6px; font: 600 12px system-ui; }
.c1 { justify-self: start; align-self: start; }
.c2 { place-self: center; } /* align-self + justify-self */
.c3 { justify-self: end; align-self: end; }
</style>
<div class="grid"><div class="c1">start / start</div><div class="c2">place-self: center</div><div class="c3">end / end</div></div>जादुई line: auto-fit + minmax()
HTML + CSS
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
</style>
<div class="gallery">
<img src="images/kaju-katli-400.webp" alt="Kaju katli">
<img src="images/ghewar-400.webp" alt="Ghewar">
<img src="images/rasmalai-400.webp" alt="Rasmalai">
<img src="images/ladoo-400.webp" alt="Ladoo">
<img src="images/kaju-katli-400.webp" alt="Kaju katli box">
<img src="images/ghewar-400.webp" alt="Ghewar platter">
</div>🧠 auto-fit बनाम auto-fill
कम items होने पर auto-fit उन्हें row भरने तक खींचता है; auto-fill ख़ाली “ghost” columns रखता है ताकि items card-size रहें। जहाँ सिर्फ़ 2 products होने पर cards न फूलें, वहाँ auto-fill लें।
💡 object-fit: cover
अलग आकार की photos एक जैसी बनती हैं: aspect-ratio box तय करता है, object-fit: cover उसे भरकर बाक़ी काटता है – <img> के लिए background-size: cover जैसा।
🏅 आज के Job Skills
✔ fr, repeat() और gap से grids✔ Line numbers से items रखना और फैलाना✔ Grid cells के अंदर alignment✔ auto-fit और minmax() से responsive galleries
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: Icon, title और text वाले feature boxes का 3×2 “Why choose us” grid बनाएँ; auto-fit से responsive।
Solution देखें
Task 2: 4-column grid में 5 boxes का “bento” layout बनाएँ जिसमें पहला box 2 columns और 2 rows फैले।
Task 3: 8 team photos की list को aspect-ratio और object-fit से बराबर 1:1 photos वाले grid में बदलें।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. grid-template-columns: 1fr 2fr देता है…
ख़ाली जगह के हिस्से।
2. grid-column: 1 / -1 का मतलब…
-1 आख़िरी line है।
3. बिना media queries responsive columns:
auto-fit + minmax।
4. Grid items के बीच जगह:
gap / row-gap / column-gap।
5. अलग आकार की photos एक जैसी:
काटें, खींचें नहीं।
Interview corner
💼 Interview Corner
repeat(auto-fit, minmax(200px, 1fr)) समझाइए।
जितने columns fit हों उतने बनाता है, हर एक कम से कम 200px और अधिकतम ख़ाली जगह का बराबर हिस्सा। Container पतला होने पर columns अपने-आप नई rows में जाते हैं; auto-fit ख़ाली tracks समेट देता है ताकि items खिंचें।
fr unit क्या है?
एक flexible length जो fixed tracks और gaps घटाने के बाद grid container में बची जगह का हिस्सा दर्शाती है।
सारांश
- display: grid + grid-template-columns layout तय करते हैं।
- fr ख़ाली जगह बाँटता है; repeat() दोहराव बचाता है; gap दूरी देता है।
- grid-column: 1 / 3 या span 2 items रखते हैं; 1 / -1 = पूरी चौड़ाई।
- repeat(auto-fit, minmax(x, 1fr)) = एक line में responsive grid।
➡️ आगे
Day 10: grid-template-areas – पूरे page layouts और admin dashboard जो mobile पर फिर से सजते हैं।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
Flexbox या Grid – कौन सीखें?
दोनों। एक दिशा के लिए Flexbox (navbars, buttons), rows + columns के लिए Grid (galleries, dashboards, page layouts)। अक्सर साथ इस्तेमाल होते हैं।
Grid lines कैसे देखें?
Chrome DevTools के Elements panel में element के पास “grid” badge पर click करें – यह क्रमांकित lines दिखाता है।
