Chromium ने फ़्लेक्सबॉक्स गैप हासिल किया

सीएसएस gap प्रॉपर्टी, Chromium के सीएसएस फ़्लेक्सबॉक्स और मल्टी-कॉलम लेआउट इंजन के लिए यहां दी गई है.

Adam Argyle

David Grogan

सीएसएस गैप

मुख्य शब्द: gap, बच्चों के बीच की दूरी है. आपने शायद इस तरह की स्पेसिंग को "गटर" या "एलिस" कहा जाता है. यह सिर्फ़ वह जगह है जहाँ बच्चों के बॉक्स के किनारे एक-दूसरे को छूते हैं.

gap फ़्लो के हिसाब से तय होता है. इसका मतलब है कि यह कॉन्टेंट के फ़्लो की दिशा के हिसाब से डाइनैमिक तौर पर बदलता है. उदाहरण के लिए, gap, अंतरराष्ट्रीय उपयोगकर्ताओं के लिए सेट की गई अलग-अलग writing-mode या direction वैल्यू के हिसाब से अपने-आप अडजस्ट हो जाएगा. इससे कॉम्पोनेंट और सीएसएस ऑथर के लिए, स्पेसिंग से जुड़ी समस्याओं को हल करना काफ़ी आसान हो जाता है. कोड को और छोटा किया जा सकता है.

स्थानीय भाषा के लिए सहायता दिखाने वाला गैप, क्योंकि यह दिशा और लिखने के मोड में बदलावों को हैंडल करता है: Codepen | Tweet

ब्राउज़र के साथ काम करना

Browser Support

• 57
• 16
• 52
• 10.1

Source

इस्तेमाल

gap, वैल्यू के तौर पर किसी भी सीएसएस length या percentage को स्वीकार करता है.

.gap-example {
  display: grid;
  gap: 10px;
  gap: 2ch;
  gap: 5%;
  gap: 1em;
  gap: 3vmax;
}

गैप की वैल्यू 1 लेंथ के तौर पर पास की जा सकती है. इसका इस्तेमाल लाइन और कॉलम, दोनों के लिए किया जाएगा.

शॉर्टहैंड

.grid {
  display: grid;
  gap: 10px;
}

एक साथ पंक्तियों और कॉलम, दोनों को एक साथ सेट करें

बड़ा किया गया

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
}

गैप के लिए दो लंबाई पास की जा सकती हैं. इनका इस्तेमाल लाइन और कॉलम के लिए किया जाएगा.

शॉर्टहैंड

.grid {
  display: grid;
  gap: 10px 5%;
}

पंक्तियों और कॉलम, दोनों को एक साथ अलग-अलग सेट करें

बड़ा किया गया

.grid {
  display: grid;
  row-gap: 10px;
  column-gap: 5%;
}

फ़्लेक्सबॉक्स gap

gap से पहले, फ़्लेक्सबॉक्स में नेगेटिव मार्जिन, कॉम्प्लेक्स सिलेक्टर, :last या :first टाइप के सूडो-क्लास सिलेक्टर या अन्य तरीकों का इस्तेमाल किया जाता था. इन तरीकों से, डाइनैमिक तरीके से लेआउट किए गए और रैप किए गए बच्चों के सेट की जगह को मैनेज किया जाता था.

पिछली कोशिशें

यहां कुछ ऐसे पैटर्न दिए गए हैं जिनका इस्तेमाल करके, लोग गैप जैसी स्पेसिंग पाते हैं.

स्यूडो-क्लास सिलेक्टर

.layout > :not(:last-child) {
  margin-bottom: 10px;
  margin-right: 10px;
}

लोबोटोमाइज़्ड आउल

.layout > * + * {
  margin-bottom: 10px;
  margin-right: 10px;
}

सोर्स

हालांकि, ऊपर दिए गए तरीके gap के पूरी तरह से विकल्प नहीं हैं. साथ ही, रैपिंग के तरीकों, लिखने के मोड या दिशा के लिए, अक्सर @media या :lang() में बदलाव करने की ज़रूरत होती है. एक या दो मीडिया क्वेरी जोड़ने में कोई समस्या नहीं है. हालांकि, ज़्यादा मीडिया क्वेरी जोड़ने से लेआउट लॉजिक मुश्किल हो सकता है.

ऊपर दिए गए लेखक का मकसद यह था कि कोई भी चाइल्ड आइटम एक-दूसरे को न छुए.

The Antidote: gap

.layout {
  display: flex;
  gap: 10px;
}

ध्यान दें: स्पेसिंग का मालिकाना हक, चाइल्ड से पैरंट को ट्रांसफ़र हो जाता है

पहले दो उदाहरणों (बिना फ़्लेक्सबॉक्स gap) में, बच्चों को टारगेट किया जाता है और उन्हें अन्य एलिमेंट से स्पेस असाइन किया जाता है. 'जवाब में दी गई गलत जानकारी को ठीक करने के लिए अतिरिक्त जानकारी' के उदाहरण में, कंटेनर के पास स्पेसिंग का मालिकाना हक होता है. इससे हर बच्चे को इस समस्या से राहत मिल सकती है. साथ ही, स्पेस के मालिकाना हक को भी एक जगह पर मैनेज किया जा सकता है. एक जैसा कॉन्टेंट तैयार करना आसान बनाना. फिर से क्रम में लगाएं, व्यूपोर्ट बदलें, एलिमेंट हटाएं, नए एलिमेंट जोड़ें वगैरह. साथ ही, स्पेसिंग एक जैसी बनी रहती है. कोई नया सिलेक्टर नहीं, कोई नई मीडिया क्वेरी नहीं, सिर्फ़ स्पेस.

Chromium DevTools के अपडेट

इन अपडेट के साथ, Chromium DevTools में भी बदलाव हुए हैं. ध्यान दें कि स्टाइल पैनल, अब grid-gap और gap को कैसे हैंडल करता है 👍

Devtools, grid-gap और gap, दोनों को दिखाता है. साथ ही, gap को grid-gap के नीचे इस्तेमाल किया जाता है, ताकि कैस्केड, नए सिंटैक्स का इस्तेमाल कर सके.

DevTools, grid-gap और gap, दोनों के साथ काम करता है. इसकी वजह यह है कि gap, पिछले सिंटैक्स का एक एलियास है.

नए लेआउट की संभावना

फ़्लेक्सबॉक्स gap की मदद से, हम सिर्फ़ सुविधा ही नहीं देते. हम बेहतरीन, सही स्पेस वाले, और इंट्रिंसिक लेआउट अनलॉक करते हैं. नीचे दिए गए वीडियो और कोड सैंपल में, Grid, Flexbox की तरह लेआउट नहीं बना सकता. ग्रिड में पंक्तियों और कॉलम की संख्या बराबर होनी चाहिए. भले ही, उन्हें अपने-आप असाइन किया गया हो.

ट्वीट करें

साथ ही, ध्यान दें कि जब बच्चे इस तरह से रैप होते हैं, तो उनके बीच की दूरी कितनी डाइनैमिक होती है. मीडिया क्वेरी, इस तरह के रैपिंग का पता नहीं लगा सकतीं, ताकि स्मार्ट तरीके से बदलाव किए जा सकें. Flexbox gap, सभी अंतरराष्ट्रीय भाषाओं के लिए ऐसा कर सकता है और करेगा.

मल्टी-कॉलम gap

फ़्लेक्सबॉक्स के साथ-साथ, मल्टी-कॉलम लेआउट में भी gap सिंटैक्स का इस्तेमाल किया जा सकता है. हालांकि, मल्टी-कॉलम लेआउट में gap सिंटैक्स के छोटे वर्शन का इस्तेमाल किया जा सकता है.

article {
  column-width: 40ch;
  column-gap: 5ch;
  gap: 5ch;
}

बहुत बढ़िया.