CSS Subgrid
तीन columns वाली एक display shelf बनाने की कल्पना करें। हर column में एक card है। हर card में एक heading, एक paragraph, और एक button है। अगर card 1 की heading बहुत लंबी है, तो यह vertically expand होता है, लेकिन card 2 की heading छोटी रहती है। क्योंकि cards independently operate करते हैं, उनके headers align नहीं होते, shelf को untidy दिखाते हुए।
CSS Subgrid इस समस्या को solve करता है। यह child containers को parent grid द्वारा defined exact grid columns या rows inherit करने देता है, headers, paragraphs, और buttons को अलग-अलग columns में automatically perfectly aligned रखते हुए।
In this page:
Syntax
.parent {
display: grid;
grid-template-columns: repeat(count, size);
}
.child {
display: grid;
grid-template-columns: subgrid;
}Subgrid क्या है?
CSS Subgrid grid-template-columns और grid-template-rows properties के लिए एक value है। यह nested grid items को parent grid पर defined exact tracks और spacing inherit करने देता है, nested content को अलग-अलग columns और rows में perfectly aligned रखते हुए।
Note:
- card headers, text blocks, और buttons को अलग-अलग layout columns में perfectly aligned रखने के लिए Subgrid इस्तेमाल करें।
- Accepted values:
- grid-template-columns: subgrid — parent के column tracks अपनाता है
- grid-template-rows: subgrid — parent के row tracks अपनाता है
- display: grid — item को खुद एक grid होना चाहिए
- grid-column: span <n> — item parent tracks को span करता है
Warning:
Subgrid सिर्फ अपने direct parent container से grid tracks inherit कर सकता है; आप grandparents से inherit नहीं कर सकते।
उदाहरण: What is Subgrid?
<style>
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
background: #eef;
padding: 10px;
}
.child {
display: grid;
grid-template-columns: subgrid;
grid-column: span 3;
gap: 8px;
}
.child div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="parent">
<div class="child">
<div>A</div><div>B</div><div>C</div>
</div>
</div>grid-template-columns: subgrid Set Up करना
अपने columns पर subgrid लागू करके, आप child container को उसकी अपनी column properties नज़रअंदाज़ करने और इसके बजाय parent container की exact column widths और tracks इस्तेमाल करने के लिए कहते हैं।
Note:
- complex, aligned tables या dashboard grids आसानी से बनाने के लिए column subgrid इस्तेमाल करें।
- Accepted values:
- grid-template-columns: subgrid — parent के columns इस्तेमाल करता है
- grid-column: 1 / -1 — सभी parent columns span करता है
- display: grid — subgrid element पर ज़रूरी
- gap — inherited gap को override कर सकता है
Warning:
subgrid columns के सही तरीके से align होने के लिए आपको child element पर एक grid column span (जैसे grid-column: span 3) define करना ही होगा।
उदाहरण: Setting up grid-template-columns: subgrid
<style>
.parent {
display: grid;
grid-template-columns: 100px 1fr 1fr;
gap: 8px;
background: #eef;
padding: 10px;
}
.child {
display: grid;
grid-column: span 3;
grid-template-columns: subgrid;
gap: 8px;
}
.child div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="parent">
<div class="child">
<div>1</div><div>2</div><div>3</div>
</div>
</div>grid-template-rows: subgrid Set Up करना
इसी तरह, अपने rows पर subgrid लागू करना child container को parent container पर defined exact row heights इस्तेमाल करने के लिए कहता है, nested components को vertically perfectly aligned रखते हुए।
Note:
- अलग-अलग columns में card headers और footer action buttons को align करने के लिए row subgrids इस्तेमाल करें।
- Accepted values:
- grid-template-rows: subgrid — parent के rows इस्तेमाल करता है
- grid-row: span <n> — parent rows span करता है
- display: grid — subgrid element पर ज़रूरी
- row-gap — inherited gap को override कर सकता है
Warning:
subgrid rows के सही तरीके से align होने के लिए सुनिश्चित करें कि आप child element पर एक grid row span define करें।
उदाहरण: Setting up grid-template-rows: subgrid
<style>
.parent {
display: grid;
grid-template-rows: 50px 50px;
gap: 8px;
background: #eef;
padding: 10px;
}
.child {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
gap: 8px;
}
.child div {
background: seagreen;
color: white;
padding: 4px;
}
</style>
<div class="parent">
<div class="child">
<div>Row 1</div><div>Row 2</div>
</div>
</div>Card Components को Align करना
Subgrid इस्तेमाल करना तब ज़रूरी है जब आप card components बना रहे हों (जैसे cookiescursor.com पर हमारे tool cards) जिनमें headers, description text, और buttons हैं, उन्हें अलग-अलग columns में horizontally perfectly aligned रखते हुए।
Note:
- अपने layout card grids को दोनों axes पर perfectly aligned रखने के लिए अपने card styles के अंदर columns और rows दोनों को subgrid set करें।
- Accepted values:
- grid-template-rows: subgrid — cards में card sections align करता है
- grid-row: span 3 — card तीन parent rows cover करता है
- display: grid — हर card पर ज़रूरी
- gap — aligned rows के बीच space
Warning:
अगर आपका card content बहुत बड़ा है, तो यह आपके parent grid tracks को expand कर सकता है, दूसरे cards को असर करते हुए।
उदाहरण: Aligning Card Components
<style>
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
border: 1px solid #ccc;
background: #fafafa;
padding: 10px;
gap: 6px;
}
</style>
<div class="card">
<h3>Header</h3>
<p>Description</p>
<button>Buy</button>
</div>Subgrid के अंदर Gaps और Spanning Manage करना
Default रूप से, subgrids अपने parent container की gap spacing inherit करते हैं। हालांकि, आप spacing को locally adjust करने के लिए child subgrid element पर एक custom gap property define करके इस behavior को आसानी से override कर सकते हैं।
Note:
- अपने subgrid elements के अंदर nested column spacing को locally customize करने के लिए custom gap settings इस्तेमाल करें।
- Accepted values:
- gap — default रूप से parent grid से inherited
- row-gap / column-gap: <length> — subgrid में overrides
- grid-column: span <n> — parent tracks span करता है
- grid-row: span <n> — parent rows span करता है
Warning:
अगर सावधानी से manage न किया जाए तो subgrid containers पर borders और padding child element alignments को असर कर सकते हैं।
उदाहरण: Managing Gaps and Spanning inside Subgrid
<style>
.parent {
display: grid;
gap: 20px;
background: #eef;
padding: 10px;
}
.child {
display: grid;
grid-template-columns: subgrid;
grid-column: span 2;
gap: 4px;
}
.child div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="parent">
<div class="child">
<div>A</div><div>B</div>
</div>
</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- child element पर एक grid-column span attribute set किए बिना subgrid columns लागू करना।
- direct parent के बजाय किसी grandparent container से subgrid tracks inherit करने की कोशिश करना।
- उन elements पर subgrid properties इस्तेमाल करना जो किसी CSS Grid parent के अंदर defined नहीं हैं।
चैप्टर सारांश
- CSS Subgrid child containers को उनके parent grids पर defined exact columns या rows inherit करने देता है।
- अपने grid templates को subgrid set करें (जैसे grid-template-rows: subgrid) और child elements पर अपने spans specify करें।
- card headers, paragraphs, और buttons को अलग-अलग columns और rows में automatically perfectly aligned रखने के लिए subgrids इस्तेमाल करें।
ब्राउज़र सपोर्ट
Standard CSS Subgrid features हर modern web browser द्वारा natively supported हैं।
🔒
Chapter Quiz — Complete all 25 topics to unlock
0/25 topics done
Complete these topics first:
- CSS Container Queries
- CSS Subgrid
- CSS Logical Properties
- CSS Logical Sizing
- CSS Writing Modes
- CSS Aspect Ratio
- CSS Object Fit
- CSS object-position
- CSS Masking
- CSS Math Functions
- CSS Motion Path
- CSS @supports
- CSS @property
- CSS At-Rules
- CSS Cursor
- CSS Will Change
- CSS User Interface
- CSS Print Styles
- CSS Pagination (Print)
- CSS Dark Mode
- CSS Accessibility
- CSS Performance
- CSS Preprocessors
- CSS Frameworks Overview
- CSS Interview Prep