CSS Grid
In this page:
selector {
display: grid;
grid-template-columns: track-sizes;
grid-template-rows: track-sizes;
gap: length;
}Grid Container Set करना
CSS Grid enable करने के लिए, आप अपने parent container पर display: grid property लागू करते हैं, और grid-template-columns और grid-template-rows इस्तेमाल करके अपनी grid columns और rows define करते हैं।
- percentages calculate किए बिना grid columns को proportionally divide करने के लिए fractional (fr) units इस्तेमाल करें।
- Accepted values:
- grid-template-columns — 1fr 2fr या repeat(3, 1fr) जैसी track sizes
- fr — available space का fraction
- minmax(min, max) — flexible track range
- auto-fill | auto-fit — repeat() counts के रूप में
- gap — rows और columns के बीच length
- grid-column | grid-row — item placement जैसे 1 / 3
उदाहरण: Setting the Grid Container
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background: #eef;
padding: 10px;
gap: 8px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div>
<div>2</div>
</div>Grid Columns और Row Spans
Default रूप से, grid items sequence में अगले available grid box में drop होते हैं। आप grid-column और grid-row properties इस्तेमाल करके individual grid items को कई columns या rows में फैला सकते हैं।
- किसी element को आसानी से कई grid columns में फैलाने के लिए span keyword (जैसे grid-column: span 2) इस्तेमाल करें।
- Accepted values:
- span <n> — n tracks span करता है
- grid-column: span 2 — दो columns wide
- grid-row: span 3 — तीन rows tall
- grid-column: 1 / span 2 — line 1 से शुरू होता है
उदाहरण: Grid Columns and Row Spans
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
background: #eef;
padding: 10px;
}
.wide {
grid-column: span 2;
background: seagreen;
color: white;
padding: 10px;
}
.container > div:not(.wide) {
background: mediumpurple;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="wide">Wide</div>
<div>Normal</div>
</div>auto-fit और minmax के साथ Fluid Grids
media queries के साथ responsive layouts बनाना tedious हो सकता है। CSS Grid auto-fit और minmax functions provide करता है जो आपको सिर्फ एक line code से पूरी तरह responsive, fluid grids बनाने देते हैं जो screen size के आधार पर automatically अपने cards को scale और wrap करते हैं।
- बिना किसी media queries की ज़रूरत के self-responsive card grids बनाने के लिए repeat(), auto-fit, और minmax() को combine करें।
- Accepted values:
- repeat(3, 1fr) — तीन बराबर tracks
- repeat(auto-fill, minmax(200px, 1fr)) — जितने fit हो सकें
- repeat(auto-fit, minmax(200px, 1fr)) — fit होता है और खाली tracks collapse करता है
- repeat(2, 100px 200px) — एक pattern repeat करता है
उदाहरण: Fluid Grids with auto-fit and minmax
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: mediumseagreen;
color: white;
padding: 16px;
}
</style>
<div class="container">
<div>Card</div>
<div>Card</div>
<div>Card</div>
</div>grid-template-areas से Layouts Structure करना
grid-template-areas property website layouts बनाने का एक intuitive, visual तरीका देती है। आप अपनी page layout का एक text-based map define करते हैं (जैसे header या sidebar जैसे names इस्तेमाल करके), और grid-area property इस्तेमाल करके अपने elements को उन areas में assign करते हैं।
- अपनी CSS में अपने strings को indent करके अपने grid area map को readable रखें।
- Accepted values:
- grid-template-areas: "header header" "nav main" — strings rows define करते हैं
- <name> — cells span करने के लिए repeated
- . — एक खाली cell
- none — default
उदाहरण: Structuring Layouts with grid-template-areas
<style>
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content";
gap: 6px;
}
.header {
grid-area: header;
background: steelblue;
color: white;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
background: seagreen;
color: white;
padding: 10px;
}
.content {
grid-area: content;
background: goldenrod;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>Grid बनाम Flexbox: कौन बेहतर है?
जबकि दोनों layout systems बेहद उपयोगी हैं, इनके अलग-अलग काम हैं। Flexbox one-dimensional layouts के लिए design किया गया है (items को एक single horizontal row या vertical column के साथ align करना)। CSS Grid two-dimensional layouts के लिए design किया गया है (columns और rows को एक साथ align करना)।
उदाहरण: Grid vs. Flexbox: Which is Best?
<style>
.flex-row {
display: flex;
background: #eef;
padding: 10px;
margin-bottom: 10px;
}
.grid-layout {
display: grid;
grid-template-columns: 1fr 1fr;
background: #efe;
padding: 10px;
gap: 8px;
}
.flex-row div, .grid-layout div {
background: steelblue;
color: white;
padding: 10px;
}
</style>
<div class="flex-row">
<div>One-dimensional row</div>
</div>
<div class="grid-layout">
<div>Two-dimensional grid</div>
</div>- parent grid container के बजाय child elements पर grid template column properties लागू करना।
- grid-template-areas के अंदर invalid area names लिखना, जैसे non-rectangular या overlapping areas बनाना।
- simple, single-line menus बनाने के लिए CSS Grid इस्तेमाल करना जब Flexbox कहीं ज़्यादा उपयुक्त है।
- अपने parent container पर display: grid लागू करके CSS Grid enable करें।
- grid-template-columns और grid-template-rows इस्तेमाल करके columns और rows define करें, और grid-column व grid-row इस्तेमाल करके element spans adjust करें।
- self-responsive grids बनाने के लिए auto-fit और minmax() इस्तेमाल करें, और visually mapped page layouts आसानी से बनाने के लिए grid-template-areas।
Standard CSS Grid layout properties और named area systems हर modern web browser द्वारा natively supported हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: