📐 Days 7–12 – Layout और Responsive Design · दिन 10
दिन 10: CSS Grid 2: Template Areas और Dashboards
⏱ 100 min📶 Intermediate🎯 100% self-study
दिन 10 / 20
✅ आज आप सीखेंगे
- grid-template-areas से areas के नाम
- Holy-grail page layout: header, nav, main, aside, footer
- Map दोबारा बनाकर mobile के लिए layout बदलना
- असली admin dashboard: sidebar, top bar, KPI cards, chart
- Grid + Flexbox साथ; subgrid
🏢 असली दुनिया में
Mr. Sharma अब आज की sales, orders और best sellers देखने के लिए admin panel चाहते हैं। हर Indian company – school ERP से billing SaaS तक – में ऐसी screen होती है, और front-end interviews में “यह dashboard layout बनाइए” ख़ूब पूछा जाता है। आज आप इसे Grid की लगभग 30 lines से बनाएँगे।
शब्दों से layout बनाइए
HTML + CSS
<style>
.page {
display: grid;
grid-template-columns: 160px 1fr 160px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
gap: 8px; min-height: 300px;
}
.page > * { padding: 12px; border-radius: 8px; color: #fff; font: 600 14px system-ui; }
header { grid-area: header; background: #264de4; }
nav { grid-area: nav; background: #0891b2; }
main { grid-area: main; background: #16a34a; }
aside { grid-area: aside; background: #f59e0b; }
footer { grid-area: footer; background: #111827; }
</style>
<div class="page">
<header>header</header><nav>nav</nav><main>main</main><aside>aside</aside><footer>footer</footer>
</div>💡 Area map के नियम
हर row string में cells की संख्या बराबर हो; हर area आयत हो; ख़ाली cell के लिए dot (.) लें। Visual layout बदलते हुए भी HTML क्रम screen readers के लिए तार्किक रह सकता है।
Mobile के लिए बदलना = map दोबारा बनाना
CSS – same HTML, a new map on small screens (media queries: Day 11)
@media (max-width: 700px) {
.page {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
}
}असली project: admin dashboard
HTML + CSS
<style>
* { box-sizing: border-box; }
body { margin: 0; background: #f1f5f9; }
.app {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 56px 1fr;
grid-template-areas:
"side top"
"side main";
min-height: 420px;
}
.side { grid-area: side; background: #111827; color: #cbd5e1; padding: 16px; }
.side b { color: #fff; display: block; margin-bottom: 16px; }
.side a { display: block; color: inherit; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.side a.on { background: #264de4; color: #fff; }
.top { grid-area: top; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #e5e7eb; }
.main { grid-area: main; padding: 16px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-content: start; }
.kpi { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 2px 8px rgb(0 0 0 / 5%); }
.kpi small { color: #6b7280; } .kpi b { display: block; font-size: 1.5rem; }
.kpi.up b { color: #16a34a; }
.panel { grid-column: 1 / -1; background: #fff; border-radius: 12px; padding: 14px; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.bars span { flex: 1; background: linear-gradient(#06b6d4, #264de4); border-radius: 6px 6px 0 0; }
@media (max-width: 600px) {
.app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "top" "side" "main"; }
.side { display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
.side b { display: none; }
}
</style>
<div class="app">
<nav class="side"><b>🍬 Sharma Admin</b><a class="on" href="#">Dashboard</a><a href="#">Orders</a><a href="#">Products</a><a href="#">Customers</a></nav>
<header class="top"><strong>Dashboard</strong><span>Vikas ▾</span></header>
<main class="main">
<div class="kpi up"><small>Today’s sales</small><b>₹48,200</b>▲ 12%</div>
<div class="kpi"><small>Orders</small><b>63</b>9 pending</div>
<div class="kpi"><small>Kg sold</small><b>71.5</b>Kaju katli top</div>
<div class="kpi up"><small>New customers</small><b>18</b>▲ 4</div>
<section class="panel"><b>Sales – last 7 days</b>
<div class="bars"><span style="height:40%"></span><span style="height:55%"></span><span style="height:35%"></span><span style="height:70%"></span><span style="height:60%"></span><span style="height:90%"></span><span style="height:100%"></span></div>
</section>
</main>
</div>| हिस्सा | तकनीक | क्यों |
|---|---|---|
| Page frame | grid-template-areas: side / top / main | पढ़ने योग्य map, mobile पर आसान बदलाव |
| KPI cards | repeat(auto-fit, minmax(140px, 1fr)) | Cards 4 → 2 → 1 में बदलते हैं |
| Chart panel | grid-column: 1 / -1 | main में हमेशा पूरी चौड़ाई |
| Top bar | Flexbox space-between | एक row, बाएँ title, दाएँ user |
| Bar chart | Flexbox align-items: flex-end + % heights | Bars नीचे से बढ़ती हैं |
| Mobile | Media query areas दोबारा बनाती है, sidebar बग़ल में scroll | Phone पर उपयोगी |
🧠 Grid या Flexbox? दोनों।
Professionals दो-आयामी ढाँचे (page, dashboard, card grid) के लिए Grid और उसके अंदर एक-आयामी हिस्सों (toolbars, button groups, card internals) के लिए Flexbox लेते हैं। यह dashboard ठीक यही करता है।
subgrid: cards के पार rows align करना
HTML + CSS
<style>
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* use the parent's row lines */
gap: 6px;
background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px;
}
.card h3 { margin: 0; font-size: 1rem; }
.card p { margin: 0; color: #6b7280; font-size: .85rem; }
.card a { align-self: end; background: #264de4; color: #fff; text-align: center; padding: 6px; border-radius: 6px; text-decoration: none; }
</style>
<div class="cards">
<div class="card"><h3>Basic</h3><p>Notes only.</p><a href="#">Buy</a></div>
<div class="card"><h3>Pro plan with a much longer title that wraps</h3><p>Notes, tests and live doubt classes every evening.</p><a href="#">Buy</a></div>
<div class="card"><h3>Premium</h3><p>Everything + mentoring.</p><a href="#">Buy</a></div>
</div>🏅 आज के Job Skills
✔ grid-template-areas से page layouts✔ Areas दोबारा बनाकर mobile के लिए layouts बदलना✔ Grid और Flexbox मिलाकर admin dashboard✔ subgrid से card internals align करना
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: grid-template-areas से blog layout बनाएँ: header, article (2fr), sidebar (1fr), footer।
Solution देखें
Task 2: Dashboard में chart के नीचे पूरी चौड़ाई वाला “Recent orders” table panel जोड़ें।
Task 3: Dashboard की mobile media query दोबारा लिखें ताकि sidebar नीचे tab bar बन जाए (hint: area क्रम और position: sticky)।
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. कौन सी property grid item का area नाम देती है?
header { grid-area: header }।
2. Area map में ख़ाली cell…
एक या अधिक dots।
3. Mobile पर layout बदलने के लिए मुख्य रूप से बदलें…
वही HTML, नया map।
4. Areas होने चाहिए…
सिर्फ़ आयत।
5. grid-template-rows: subgrid card को…
Siblings के पार align।
Interview corner
💼 Interview Corner
Responsive dashboard layout कैसे बनाएँगे?
sidebar/topbar/main के लिए named areas वाला Grid, KPI cards के लिए auto-fit/minmax, grid-column: 1 / -1 से full-width panels, components के अंदर Flexbox, और media queries जो area map दोबारा बनाएँ और phones पर sidebar को horizontal scroller या drawer बनाएँ।
क्या Grid से visual क्रम बदलना accessibility पर असर डालता है?
हाँ – screen readers और keyboard focus DOM क्रम मानते हैं, visual क्रम नहीं। HTML तार्किक पढ़ने के क्रम में रखें और वहीं visual बदलाव करें जहाँ अर्थ न बदले।
सारांश
- grid-template-areas layout को text map की तरह बनाता है।
- Mobile के लिए media query में map दोबारा बनाएँ।
- Dashboards = Grid ढाँचा + auto-fit cards + Flexbox details।
- subgrid sibling cards के internals align करता है।
➡️ आगे
Day 11: responsive design – mobile-first CSS, media queries, breakpoints और असली devices पर testing।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या dashboards के लिए framework चाहिए?
नहीं – जैसा आपने देखा, Grid + Flexbox लगभग 30 lines में layout बना देते हैं। Frameworks तैयार components में मदद करते हैं, layout में नहीं।
क्या subgrid इस्तेमाल करना सुरक्षित है?
सभी मौजूदा बड़े browsers में चलता है। पुराने browsers में card अपनी ही rows पर लौट जाता है, तो page फिर भी चलता है।
