CSS Gap
किसी shelf पर books को arrange करने की कल्पना करें, हर एक के बीच छोटे foam spacers wedge करके ताकि वे कभी न छुएँ, अगर आपको ज़्यादा breathing room चाहिए तो आपको हर एक spacer को individually adjust करना होगा।
gap property खुद shelf पर एक single setting है जो हर book को evenly automatically space कर देती है, बाद में आप कितनी भी books जोड़ें या हटाएँ।
flexbox और grid layouts में, gap हर child element में margin जोड़ने वाली पुरानी trick को replace कर देता है, आपको parent container पर एक साफ़ declaration देते हुए जो rows और columns दोनों में items के बीच spacing को consistently handle करती है।
In this page:
Syntax
selector {
display: grid | flex;
gap: row-gap column-gap;
}Flexbox में gap
किसी flex container के अंदर, gap adjacent flex items के बीच main और cross axes दोनों के साथ consistent space जोड़ता है, हर child पर individual margins की ज़रूरत के बिना।
Note:
- बहुत पहले और आख़िरी item के outer edge पर extra अनचाही space से बचने के लिए flex items के बीच margin के बजाय gap इस्तेमाल करें।
- Accepted values:
- gap: <length> — दोनों axes पर flex items के बीच space
- row-gap: <length> — सिर्फ wrapped rows के बीच space
- column-gap: <length> — सिर्फ एक row में items के बीच space
- normal — default (flex और grid में 0)
- <percentage> — container के content box के against resolved
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
flexbox में gap को एक reasonably modern browser चाहिए, critical spacing के लिए इस पर भरोसा करने से पहले हमेशा अपना minimum supported browser version check करें।
उदाहरण: gap in Flexbox
<style>
.container {
display: flex;
gap: 16px;
background: #eef;
padding: 10px;
}
.container div {
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Grid में gap
gap originally CSS Grid के लिए introduce किया गया था, जहाँ यह grid tracks को साफ़ तरीके से अलग करता है चाहे layout में कितनी भी rows या columns हों, पूरी grid को visually uniform रखते हुए।
Note:
- Grid gap grid-template-columns: repeat() के साथ seamlessly काम करता है, columns की संख्या responsively बदलने पर भी spacing consistent रहती है।
- Accepted values:
- gap: <length> — rows और columns के लिए एक जैसा gutter
- gap: <row> <column> — दो values row-gap फिर column-gap set करती हैं
- <percentage> — grid container के size के relative
- normal — default, कोई gutter नहीं (सिर्फ multi-column layouts में 1em)
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
grid में gap सिर्फ tracks के बीच की space को असर करता है, यह खुद grid container के outer edge के आस-पास padding नहीं जोड़ता।
उदाहरण: gap in Grid
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div><div>2</div><div>3</div>
</div>row-gap और column-gap
row-gap और column-gap आपको हर axis पर independently spacing control करने देते हैं, जो तब उपयोगी है जब किसी design को tighter horizontal spacing चाहिए लेकिन rows के बीच ज़्यादा breathing room।
Note:
- dense card grids में column-gap को row-gap से छोटा set करें ताकि cards horizontally grouped महसूस हों जबकि rows visually separated रहें।
- Accepted values:
- row-gap: <length> — rows के बीच vertical space
- column-gap: <length> — columns के बीच horizontal space
- <percentage> — container के relative
- normal — default, कोई gap नहीं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
row-gap और column-gap को उन containers पर नज़रअंदाज़ किया जाता है जो flex, grid, या multi-column नहीं हैं, ठीक gap shorthand जैसे।
उदाहरण: row-gap and column-gap
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 24px;
column-gap: 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>gap Shorthand
gap shorthand या तो दोनों axes पर लागू एक value accept करता है, या दो values जहाँ पहली row-gap set करती है और दूसरी column-gap, padding और margin shorthands जैसी ही spirit में।
Note:
- जब आप हर जगह identical spacing चाहते हैं तो gap: 16px लिखें, यह row-gap और column-gap के लिए अलग-अलग value दोहराने से ज़्यादा concise है।
- Accepted values:
- gap: 16px — row और column gaps दोनों के लिए एक value
- gap: 8px 24px — पहले row gap, फिर column gap
- gap: 2% — container का percentage
- gap: normal — default पर reset
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
gap के two-value form में, order हमेशा पहले row-gap और फिर column-gap होता है, इन्हें उलटना गलती से horizontal और vertical spacing को swap कर देता है।
उदाहरण: The gap Shorthand
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 8px;
background: #eef;
padding: 10px;
}
.container div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>Browser Support और Fallbacks
जबकि gap को अब broad support है, पुराने projects को कभी-कभी अभी भी legacy browsers के लिए एक fallback चाहिए होता है, जो आमतौर पर container पर negative margins और items पर matching margins से achieve किया जाता है।
Note:
- किसी ऐसे project में flexbox gap पर भरोसा करने से पहले current browser support tables check करें जिसे अभी भी active use में मौजूद पुराने browser versions को support करना है।
- Accepted values:
- gap — हर modern browser में Flexbox और Grid दोनों में काम करता है
- grid-gap — सिर्फ Grid के लिए legacy alias
- margin — बहुत पुराने browsers के लिए fallback
Warning:
पुराने margin-based spacing fallback को सावधानी से हटाना ज़रूरी है, एक ही items पर gap और manual margins दोनों mix करना spacing को double कर सकता है।
उदाहरण: Browser Support and Fallbacks
<style>
.container {
display: flex;
margin: -8px;
background: #eef;
padding: 10px;
}
.item {
margin: 8px;
background: dodgerblue;
color: white;
padding: 10px;
}
</style>
<div class="container">
<div class="item">Fallback spacing via negative margin</div>
<div class="item">Item</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. #}
आम गलतियां
- किसी plain block या inline container पर gap इस्तेमाल करने की कोशिश करना, gap सिर्फ flex, grid, और multi-column containers पर लागू होता है।
- gap को margin के साथ confuse करना, gap सिर्फ items के बीच space बनाता है, container के outer edges पर कभी extra space नहीं जोड़ता।
- नए code में पुरानी grid-gap prefixed property इस्तेमाल करना, gap अब standard name है और grid-gap एक legacy alias है।
चैप्टर सारांश
- gap row-gap और column-gap का shorthand है, flex या grid items के बीच consistent spacing बनाते हुए।
- gap flexbox और grid containers दोनों में काम करता है, margin के उलट यह container के outer edge के आस-पास कभी space नहीं जोड़ता।
- row-gap और column-gap को independently set किया जा सकता है जब rows और columns के बीच spacing अलग-अलग चाहिए हो।
ब्राउज़र सपोर्ट
gap को CSS Grid में 2017 से हर modern browser में support है, और flexbox के लिए इसे 2020 में Chrome, Firefox, Safari, और Edge में जोड़ा गया।
🔒
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: