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

सीएसएस gap प्रॉपर्टी, Chromium के सीएसएस Flexbox और कई कॉलम वाले लेआउट इंजन के लिए उपलब्ध है.

एडम आर्गील

डेविड ग्रॉगन

सीएसएस गैप

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

वेबसाइट का अलग-अलग ब्राउज़र पर चलना

इस्तेमाल का तरीका

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

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

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

.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

Flexbox में gap के लॉन्च होने से पहले, रणनीतियों में नेगेटिव मार्जिन, कॉम्प्लेक्स सिलेक्टर, :last या :first टाइप की छद्म-क्लास सिलेक्टर या बच्चों के डाइनैमिक तौर पर लेआउट और रैपिंग सेट की जगह को मैनेज करने के अन्य तरीके शामिल थे.

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

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

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

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

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

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

द एंटीडोट: गैप

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

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

Chromium DevTools से जुड़े अपडेट

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

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

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

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

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

कई कॉलम वाला gap

gap सिंटैक्स के साथ काम करने वाले Flexbox के अलावा, कई कॉलम वाले लेआउट, छोटे gap सिंटैक्स के साथ भी काम करते हैं.

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

बहुत रैड.