CSS 12-Column Grid Layout
In this page:
.row {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.col {
grid-column: span number;
}12 Columns specifically क्यों
12 को 2, 3, 4, और 6 से divide किया जा सकता है, इसलिए एक 12-column grid सिर्फ सही संख्या के columns span करके एक half-width, third-width, quarter-width, या sixth-width component express कर सकती है -- यही flexibility है जिसकी वजह से Bootstrap जैसे frameworks ने इसे standard बनाया।
उदाहरण: Why 12 Columns Specifically
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.half { grid-column: span 6; background: lightblue; padding: 8px; }
.third { grid-column: span 4; background: lightgreen; padding: 8px; }
</style>
<div class="grid">
<div class="half">Half</div>
<div class="third">Third</div>
</div>12 बराबर Tracks Set Up करना
grid-template-columns: repeat(12, 1fr) एक line में बारह बराबर-width flexible columns बनाता है, वह base grid बनाते हुए जिस पर हर component span करेगा।
- Accepted values:
- grid-template-columns: repeat(12, 1fr) — बारह बराबर columns
- grid-column: span <n> — n columns span करता है
- gap: <length> — gutters
- minmax(0, 1fr) — overflow रोकता है
उदाहरण: Setting Up the 12 Equal Tracks
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
}
.grid div {
background: lightblue;
padding: 8px;
}
</style>
<div class="grid">
<div>Twelve equal columns as the base</div>
</div>Component Widths के लिए Columns Span करना
grid-column: span 6 इस्तेमाल करने वाला एक item exactly आधी row लेता है (12 में से 6 columns); span 4 एक third-width component देता है, और span 3 एक quarter-width component देता है।
- Accepted values:
- grid-column: span 3 — quarter width
- grid-column: span 4 — third width
- grid-column: span 6 — half width
- grid-column: span 12 — full width
उदाहरण: Spanning Columns for Component Widths
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.quarter { grid-column: span 3; background: lightblue; padding: 8px; }
</style>
<div class="grid">
<div class="quarter">3 of 12 = quarter width</div>
</div>एक Multi-Component Row बनाना
कई items जिनके spans जोड़कर 12 बनते हैं (जैसे span 8 + span 4, या तीन span 4 items) automatically उसी row में साथ-साथ बैठते हैं, क्योंकि CSS Grid auto-placement अगली row में wrap करने से पहले हर row भरता है।
- Accepted values:
- grid-column: span 4 — row का एक तिहाई
- grid-column: span 8 — row का दो-तिहाई
- grid-column: span 6 — आधी row
- नोट: row भरने के लिए spans को जोड़कर 12 होना चाहिए
उदाहरण: Building a Multi-Component Row
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 8px;
}
.main { grid-column: span 8; background: lightblue; padding: 8px; }
.sidebar { grid-column: span 4; background: lightgreen; padding: 8px; }
</style>
<div class="grid">
<div class="main">span 8</div>
<div class="sidebar">span 4 — same row, adds up to 12</div>
</div>Columns के बीच Gutters
एक gap value जोड़ना (आमतौर पर 16-24px) 12 columns के बीच consistent gutters बनाता है, बिना extra margin hacks की ज़रूरत के traditional 12-column frameworks के visual spacing convention से match करते हुए।
- Accepted values:
- gap: <length> — gutters
- column-gap: <length> — horizontal gutters
- row-gap: <length> — vertical gutters
- calc() — gutters को account में लेने वाले sizes
उदाहरण: Gutters Between Columns
<style>
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
}
.col { grid-column: span 4; background: lightblue; padding: 8px; }
</style>
<div class="grid">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>marginसे column gaps जोड़ना और row को 100% से wider बना देना।- किसी row में spans का योग 12 से ज़्यादा बना देना, जो एक नई row में wrap हो जाता है।
- एक responsive rule न जोड़ना, इसलिए 12 columns phones पर narrow रहते हैं।
- CSS Grid items को एक grid container के अंदर rows और columns में रखता है।
- Tracks, gaps, alignment, और named areas layout define करते हैं।
- Grid item placement, alignment, और order positions control करते हैं, और एक 12-column layout एक common pattern है।
CSS Grid Chrome 57+, Firefox 52+, Safari 10.1+ और Edge 16+ में supported है।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: