पब्लिश होने की तारीख: 15 मई, 2026
सीएसएस गैप डेकोरेशन, Chrome और Edge के 149 और इसके बाद के वर्शन में उपलब्ध हैं. बॉर्डर या स्यूडो-एलिमेंट का इस्तेमाल किए बिना, ग्रिड, फ़्लेक्सबॉक्स, और मल्टी-कॉलम लेआउट के बीच के अंतर को स्टाइल करें. इस सुविधा को Microsoft Edge और Google Chrome की टीमों ने मिलकर बनाया है.
समस्या
लेआउट आइटम के बीच स्टाइलिंग गैप के लिए, हमेशा वर्कअराउंड की ज़रूरत होती है. अलग-अलग आइटम, सूडो-एलिमेंट, और बैकग्राउंड हैक पर बॉर्डर. इन तरीकों में ये लागतें शामिल हैं:
- ये स्ट्रक्चर पर निर्भर करते हैं. विज़ुअल सेपरेटर जोड़ने का मतलब है कि आपको अपने मार्कअप में बदलाव करना होगा या कुछ खास आइटम के लिए सिलेक्टर लिखने होंगे.
- ये सुलभता में रुकावट डालते हैं. अक्सेसिबिलिटी ट्री में ऐसे अतिरिक्त DOM एलिमेंट दिखते हैं जो नहीं दिखने चाहिए.
- इन्हें मैनेज करना मुश्किल होता है. रिस्पॉन्सिव लेआउट, उन मान्यताओं को तोड़ देते हैं जिनके आधार पर आपके गैप की स्टाइलिंग की गई थी.
- इनसे परफ़ॉर्मेंस पर बुरा असर पड़ता है. ज़्यादा DOM नोड होने पर, लेआउट का काम ज़्यादा होता है.
- इनमें कॉन्टेंट बनाने से जुड़ी एर्गोनॉमिक्स की सुविधा अच्छी नहीं होती. चीज़ों को सही तरीके से काम करने के लिए, अक्सर जटिल ज्यामितीय गणनाओं की ज़रूरत होती थी.
column-rule प्रॉपर्टी, मल्टी-कॉलम लेआउट के लिए गैप डेकोरेशन को मैनेज करती है. हालांकि, ग्रिड और फ़्लेक्सबॉक्स में पहले ऐसी सुविधा नहीं थी.
समाधान
ग्रिड और फ़्लेक्सबॉक्स कंटेनर अब column-rule को स्वीकार करते हैं. नई row-rule प्रॉपर्टी, हॉरिज़ॉन्टल गैप को मैनेज करती है. ये डेकोरेशन सिर्फ़ विज़ुअल होते हैं और इनसे मौजूदा लेआउट पर कोई असर नहीं पड़ता. अगर मल्टी-कॉलम लेआउट में column-rule प्रॉपर्टी का इस्तेमाल किया जाता है, तो मौजूदा व्यवहार में कोई बदलाव नहीं होगा.
उदाहरण के लिए, यहां तीन पैनल वाला एक फ़्लेक्स कंटेनर दिया गया है. इसमें कॉलम और लाइन के नियमों के लिए, स्टाइल की सूची का इस्तेमाल किया गया है:
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
इस उदाहरण में दिखाया गया है कि row-rule और column-rule, दोनों चौड़ाई, स्टाइल, और रंग के लिए एक ही शॉर्टहैंड स्वीकार करते हैं. दोनों को एक साथ सेट करने के लिए, rule शॉर्टहैंड का इस्तेमाल करें.
नई प्रॉपर्टी
हालांकि, हमने सिर्फ़ column-rule को अन्य लेआउट मोड में नहीं जोड़ा है. साथ ही, हमने row को भी जोड़ा है. हमने डेकोरेशन को बेहतर बनाने के लिए कंट्रोल भी जोड़े हैं:
ये इंटरसेक्शन पर कैसे टूटते हैं, गैप के किनारों से कितनी दूर तक अंदर की ओर जाते हैं, आइटम के हिसाब से कब दिखते हैं, और गैप में अलग-अलग स्टाइल कैसे दिखते हैं. नियम की चौड़ाई, रंग, और इनसेट को भी ऐनिमेट किया जा सकता है.
repeat() सिंटैक्स
गैप डेकोरेशन में, चौड़ाई, स्टाइल, और रंग की वैल्यू के लिए repeat() का इस्तेमाल किया जा सकता है. इससे आपको छोटे फ़ॉर्म में मौजूद गैप में अलग-अलग डेकोरेशन जोड़ने की सुविधा मिलती है. यह सुविधा, ग्रिड में ट्रैक की परिभाषाओं के लिए इस्तेमाल किए जाने वाले repeat() सिंटैक्स की तरह होती है:
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
इससे पहली दो लाइनों के बीच 1 पिक्सल का अंतर और तीसरी लाइन के बीच 4 पिक्सल का अंतर तय होता है. अगर वैल्यू से ज़्यादा अंतर हैं, तो यह क्रम दोहराया जाता है. repeat() के बिना भी, एक से ज़्यादा वैल्यू सीधे तौर पर पास की जा सकती हैं. उदाहरण के लिए, कैलेंडर में घंटे और आधे घंटे की सीमाओं के लिए, लाइन के स्टाइल से जुड़े नियम:
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
डेकोरेशन ब्रेक कंट्रोल करना
column-rule-break और row-rule-break प्रॉपर्टी से यह कंट्रोल किया जाता है कि गैप इंटरसेक्शन पर डेकोरेशन कैसे काम करते हैं:
normal(डिफ़ॉल्ट): कंटेनर के टाइप के हिसाब से तय होता है कि यह कैसे काम करेगा. ज़्यादा जानकारी के लिए, स्पेसिफ़िकेशन देखें.none: सजावट, चौराहों पर लगातार दिखती है.intersection: डेकोरेशन वहां टूट जाते हैं जहां लाइन और कॉलम के बीच का अंतर क्रॉस होता है.
उदाहरण के लिए, अगर आपने ग्रिड कंटेनर में rule-break को intersection पर सेट किया है, तो नियम गैप इंटरसेक्शन पर टूट जाते हैं. हालांकि, ऐसा नहीं होता है:
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
अगर आपने rule-break को none पर सेट किया है, तो चौराहे पर पहुंचने तक नियम लगातार लागू होते हैं:
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
इस वैल्यू को इंटरैक्टिव प्लेग्राउंड में आज़माया जा सकता है.
सजावट को बड़ा या छोटा करना
column-rule-inset और row-rule-inset प्रॉपर्टी से यह कंट्रोल किया जाता है कि डेकोरेशन, गैप में कितनी दूर तक दिखें. शॉर्टहैंड का इस्तेमाल करके, सभी किनारों पर एक साथ इनसेट सेट किए जा सकते हैं. इसके अलावा, column-rule-inset-cap (ऐसे एंडपॉइंट के लिए जिनमें कोई क्रॉसिंग गैप नहीं है) और column-rule-inset-junction (ऐसे एंडपॉइंट के लिए जो अन्य गैप के साथ इंटरसेक्ट करते हैं) का इस्तेमाल करके, इनसेट को एसिमेट्रिकल तरीके से टारगेट किया जा सकता है.
वैल्यू, लंबाई, प्रतिशत या overlap-join कीवर्ड हो सकती हैं. यह कीवर्ड, गैप डेकोरेशन को कोनों में जोड़ता है. उदाहरण के लिए, rule-inset को 5 पिक्सल पर सेट करने से, सभी डेकोरेशन अंदर की ओर 5 पिक्सल तक छोटे हो जाते हैं:
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
rule-inset-cap को 0 पिक्सल और rule-inset-junction को 10 पिक्सल पर सेट करने से, कंटेनर के किनारों पर फ़्लश किए गए डेकोरेशन मिलते हैं. हालांकि, इंटरसेक्शन पर ये डेकोरेशन अंदर की ओर सेट होते हैं. ऊपर दिखाए गए डैशबोर्ड डेमो में इस तरीके का इस्तेमाल किया गया है. साथ ही, इनसेट पर कर्सर घुमाने पर वे ऐनिमेट होते हैं:
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
किसको दिखे
column-rule-visibility-items और row-rule-visibility-items प्रॉपर्टी से यह कंट्रोल किया जाता है कि आइटम की आस-पास की जगह के हिसाब से नियम कब दिखेंगे:
normal(डिफ़ॉल्ट): कंटेनर टाइप पर निर्भर करता है.all: नियम हर गैप में दिखते हैं. भले ही, वे खाली हों.around: नियम तब दिखते हैं, जब एक या उससे ज़्यादा आइटम आस-पास मौजूद हों.between: लाइनें सिर्फ़ दो आस-पास के आइटम के बीच दिखती हैं.
rule-visibility-items शॉर्टहैंड, दोनों को एक साथ सेट करता है.
rule-visibility-items को between पर सेट करने से, सिर्फ़ आस-पास के आइटम के बीच के नियम दिखेंगे:
section {
rule: 2px solid black;
rule-visibility-items: between;
}
वहीं दूसरी ओर, rule-visibility-items को all पर सेट करने से, हर गैप में नियम दिखेंगे. भले ही, उनके आस-पास आइटम न हों:
section {
rule: 2px solid black;
rule-visibility-items: all;
}
लाइव डेमो में वैल्यू को टॉगल करके देखें कि क्या अंतर है!
सजावट को ऐनिमेट करना
नियम की चौड़ाई, रंग, और इनसेट को ऐनिमेट किया जा सकता है. इन्हें होवर करने पर या स्थिति में किसी अन्य बदलाव पर ट्रांज़िशन किया जा सकता है. डैशबोर्ड के डेमो में, कर्सर घुमाने पर ट्रांज़िशन के नियम, रंग, और इनसेट दिखाए गए हैं:
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
डेमो
इस पोस्ट में दिखाए गए सभी डेमो, Edge की डेमो साइट पर उपलब्ध हैं.
डेवलपर के लिए उपलब्ध कराए गए वर्शन के बारे में जानकारी देने वाले ब्लॉग पोस्ट में कई और डेमो शामिल हैं. इनमें इंटरैक्टिव प्लेग्राउंड, बर्गर मेन्यू, नोटबुक लेआउट, और सुडोकू ग्रिड वाला मैगज़ीन स्टाइल लेआउट शामिल हैं.
डेवलपर के लिए बिना किसी शुल्क आज़माने की सुविधा के बाद हुए बदलाव
अगर आपने डेवलपर ट्रायल (Chrome 139) के दौरान गैप डेकोरेशन आज़माए थे, तो इन बदलावों पर ध्यान दें:
- यह सुविधा डिफ़ॉल्ट रूप से उपलब्ध होती है. इसके लिए, किसी फ़्लैग की ज़रूरत नहीं होती.
- कुछ प्रॉपर्टी के नाम, नए स्पेसिफ़िकेशन के मुताबिक अपडेट किए गए हैं. उदाहरण के लिए,
column-rule-outsetऔरrow-rule-outsetका नाम बदलकरcolumn-rule-insetऔरrow-rule-insetकर दिया गया है. column-rule-visibility-itemsऔरrow-rule-visibility-itemsप्रॉपर्टी जोड़ी गईं.- ऐनिमेशन की सुविधा जोड़ी गई.
आज ही गैप डेकोरेशन का इस्तेमाल करें
गैप डेकोरेशन की सुविधा, Chrome और Edge के 149 और इसके बाद के वर्शन में काम करती है. अगर गैप डेकोरेशन सिर्फ़ सजावट के लिए हैं, तो यह सुविधा प्रोग्रेसिव एन्हांसमेंट है. जिन ब्राउज़र पर यह सुविधा काम नहीं करती है उनमें गैप सामान्य रूप से रेंडर होते हैं और कोई डेकोरेशन नहीं दिखता है. जिन ब्राउज़र पर यह सुविधा काम नहीं करती उनके लिए एक पॉलीफ़िल तैयार किया जा रहा है.
Chromium के इश्यू ट्रैकर पर बग की जानकारी दें. ज़्यादा जानकारी के लिए, सीएसएस गैप डेकोरेशन स्पेसिफ़िकेशन देखें.