The Gap Strikes Back: अब CSS Gap को स्टाइल किया जा सकता है

 (css-tricks.com)
8 पॉइंट द्वारा GN⁺ 2025-07-04 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • पहले CSS gap प्रॉपर्टी से spacing बनाया जा सकता था, लेकिन gap क्षेत्र को खुद स्टाइल करना संभव नहीं था, इसलिए कई workaround तरीकों (अतिरिक्त elements, border, pseudo-element आदि) की ज़रूरत पड़ती थी
  • नया CSS gap decorations फीचर row-rule, column-rule आदि प्रॉपर्टीज़ के जरिए layout items के बीच सीधे लाइनें (separator) खींचने देता है
  • Grid, Flexbox, Multi-column, और जल्द ही Masonry तक सभी प्रमुख layouts में decoration लागू किया जा सकता है, और अलग markup या अनावश्यक elements के बिना सिर्फ CSS से structural/visual सुधार संभव है
  • कई तरह के styles (thickness, color, pattern आदि) के repeat/combination को support करता है, और repeat(), outset, paint-order आदि से fine-grained control संभव है
  • फिलहाल यह Chromium-आधारित ब्राउज़रों (Chrome/Edge 139+) में केवल flag enable करने पर उपलब्ध है, और अभी standardization/expansion जारी है

मौजूदा gap की सीमाएँ और बदलाव

  • पहले gap क्षेत्र को स्टाइल करना मुश्किल था, और separator के लिए border या नकली element जोड़ने पड़ते थे
  • इस तरीके से layout size, accessibility, markup complexity आदि में कई कमियाँ पैदा होती थीं
  • अब gap decorations standard आ गया है, जिससे सिर्फ सरल CSS प्रॉपर्टीज़ के जरिए spacing क्षेत्र में decoration (जैसे line) लागू किया जा सकता है

CSS gap decorations का परिचय

  • column-rule: मौजूदा multi-column में vertical separator खींचने के लिए इस्तेमाल होता है (उदाहरण: column-rule: 1px solid black;)
  • अब इस प्रॉपर्टी को flexbox, grid आदि में भी इस्तेमाल किया जा सकता है 
    .my-grid-container {  
  display: grid;  
  gap: 2px;  
  column-rule: 2px solid pink;  
}
  • row-rule: rows के बीच separator खींच सकता है 
    .my-flex-container {  
  display: flex;  
  gap: 10px;  
  row-rule: 10px dotted limegreen;  
  column-rule: 5px dashed coral;  
}
  • कई styles का repeat/combination: repeat() या comma separation से अलग-अलग styles मिलाए जा सकते हैं 
    .my-container {  
  display: grid;  
  gap: 2px;  
  row-rule:  
    repeat(2, 1px dashed red),  
    2px solid black,  
    repeat(auto, 1px dotted green);  
}
  • fine-grained control प्रॉपर्टीज़: row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order आदि के जरिए position, intersection, overlap order आदि को बारीकी से नियंत्रित किया जा सकता है

उदाहरण: gap decorations का व्यावहारिक उपयोग

  • उदाहरण पेज में body को grid बनाया गया है, और header/nav/main/footer को gap से अलग किया गया है
  • row-rule से अलग thickness, color और style वाली separator lines लागू की जा सकती हैं
  • nav मेनू में flexbox और column-rule से items के बीच lines खींची जा सकती हैं
  • main क्षेत्र में flexbox से image और text को masonry रूप में रखा गया है, और row-rule, column-rule से grid-style structure को उभारा गया है
  • column-rule-outset: 0; आदि से line की शुरुआत/अंत की position को बारीकी से समायोजित किया जा सकता है

ब्राउज़र support और activation

  • फिलहाल Chrome/Edge 139+ जैसे Chromium-आधारित ब्राउज़रों में flag (about://flags → Experimental Web Platform Features) enable करना ज़रूरी है
  • औपचारिक standardization जारी है और feedback व experiments को प्रोत्साहित किया जा रहा है

और जानें व Playground

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.