अंतर - सीएसएस-ट्रिक्स

सीएसएस में अंतर संपत्ति के लिए एक आशुलिपि है row-gapऔर column-gapगटर का आकार है, जो ग्रिड, फ्लेक्स, और बहु-स्तंभ लेआउट के भीतर पंक्तियों और स्तंभों के बीच की जगह है निर्दिष्ट।

/* Grid layout */ .container ( display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 2fr 1fr; gap: 30px 20px; ) /* Flex layout */ .container ( display: flex; gap: 10%; ) /* Multi-column layout */ .container ( column-count: 5; gap: 20px; )

gapसंपत्ति में कार्रवाई देखने के लिए नीचे डेमो में स्लाइडर का उपयोग करें :

वाक्य - विन्यास

gap एक या दो मूल्यों को स्वीकार करता है:

• एक एकल मान दोनों row-gapऔर एक ही मान सेट करता है column-gap।
• जब दो मानों का उपयोग किया जाता है, पहला सेट करता है row-gapऔर दूसरा सेट करता है column-gap।

.container ( gap: 1rem; /* Is equivalent to: * row-gap: 1rem; * column-gap: 1rem */ gap: 10px 15%; /* Is equivalent to: * row-gap: 10px; * column-gap: 15%; */ )

सीएसएस ग्रिड लेआउट मॉड्यूल के लिए विनिर्देश ने grid-gapसंपत्ति का उपयोग करके ग्रिड पटरियों के बीच की जगह को परिभाषित किया । gapइसे बदलने का इरादा है ताकि अंतराल को कई CSS लेआउट विधियों में फ्लेक्सबॉक्स की तरह परिभाषित किया जा सके, लेकिन grid-gapअभी भी ऐसे उदाहरणों में उपयोग किए जाने की आवश्यकता है जहां एक ब्राउज़र ने कार्यान्वित किया हो, grid-gapलेकिन अभी तक नई gapसंपत्ति का समर्थन करना शुरू नहीं किया है।

मूल्यों

gap निम्नलिखित मूल्यों को स्वीकार करता है:

• normal: (डिफ़ॉल्ट) ब्राउज़र मल्टी-कॉलम लेआउट के लिए 1em और अन्य सभी लेआउट संदर्भों (यानी ग्रिड और फ्लेक्स) के लिए 0px का उपयोग किया गया मान निर्दिष्ट करेगा।
• : कोई भी मान्य और गैर नकारात्मक सीएसएस लंबाई, जैसे px, em, remऔर %दूसरों के बीच।
• : तत्व के आयाम के सापेक्ष एक गैर-नकारात्मक प्रतिशत मान के अंतराल का आकार। (विवरण के लिए नीचे देखें।)
• initial: संपत्ति की डिफ़ॉल्ट सेटिंग को लागू करता है, जो है normal।
• inherit: माता-पिता के अंतराल मूल्य को गोद ले।
• unset:gap तत्व से करंट हटाता है ।

अंतर गुणों में प्रतिशत

जब अंतर आयाम में एक कंटेनर का आकार निश्चित होता है, तो gapकिसी भी लेआउट प्रकार में कंटेनर के सामग्री बॉक्स के आकार के खिलाफ प्रतिशत का समाधान करता है।

दूसरे शब्दों में, जब ब्राउज़र कंटेनर के आकार को जानता है, तो यह प्रतिशत मान की गणना कर सकता है gap। उदाहरण के लिए, जब कंटेनर की ऊंचाई 100px है और gap10% पर सेट है, तो ब्राउज़र जानता है कि 100px का 10% 10px है।

लेकिन जब ब्राउज़र आकार नहीं जानता, तो आश्चर्य होगा, "10% क्या?" इन मामलों में, gapलेआउट प्रकार के आधार पर अलग तरह से व्यवहार करता है।

एक ग्रिड लेआउट में, प्रतिशत आंतरिक आकार के योगदान को निर्धारित करने के लिए शून्य के खिलाफ हल करते हैं, लेकिन तत्व की सामग्री बॉक्स के खिलाफ हल करते हैं जब बॉक्स की सामग्री को बाहर निकालते हैं, तो इसका मतलब है कि यह वस्तुओं के बीच जगह देगा लेकिन अंतरिक्ष कंटेनर के आकार को प्रभावित नहीं करता है।

इस डेमो में, कंटेनर की ऊंचाई निश्चित नहीं है। जब आप gapआकार बढ़ाते हैं तो देखें । फिर gapपिक्सेल इकाइयों में सेट करें और पुनः प्रयास करें:

एक फ्लेक्स लेआउट में, प्रतिशत सभी मामलों में शून्य के खिलाफ हल होता है, जिसका अर्थ है कि जब कंटेनर का आकार ब्राउज़र के लिए ज्ञात नहीं होता है तो अंतराल लागू नहीं होगा:

अंतर के साथ कैल्क () फ़ंक्शन का उपयोग करना

आप calc()फ़ंक्शन का उपयोग कर सकते हैं gapलेकिन आकार को निर्दिष्ट करने के लिए , इस लेखन के समय, सफारी और आईओएस पर इसके लिए कोई समर्थन नहीं है ।

.flex-layout ( display: flex; gap: calc(5vh + 5px) calc(5vw + 5px); ) 
 .grid-layout ( display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(5vmin + 5px); )

उदाहरण

gapसंपत्ति ग्रिड, फ्लेक्स और मल्टी-कॉलम लेआउट में उपयोग के लिए डिज़ाइन की गई है। आइए कुछ उदाहरण देखें।

जाली का नक्शा

निम्नलिखित डेमो में, आप एक ग्रिड कंटेनर पर और गुण gapनिर्दिष्ट करने के लिए इस्तेमाल किया जा सकता है , क्रमशः ग्रिड पंक्तियों और ग्रिड स्तंभों के बीच गटर को परिभाषित करते हुए:row-gapcolumn-gap

फ्लेक्स लेआउट

एक फ्लेक्स कंटेनर के मुख्य अक्ष में गैप को लागू करना फ्लेक्स लेआउट की एक लाइन में फ्लेक्स आइटम के बीच रिक्ति को इंगित करता है ।

यहाँ column-gapएक पंक्ति दिशा में उपयोग किया जाता है:

यहां row-gapकॉलम दिशा में उपयोग किया जाता है:

एक फ्लेक्स कंटेनर gapके क्रॉस अक्ष पर लागू करना फ्लेक्स लेआउट के फ्लेक्स लाइनों के बीच रिक्ति को इंगित करता है ।

यहाँ row-gapएक पंक्ति दिशा में है:

यहाँ column-gapएक कॉलम दिशा में है:

बहु-स्तंभ लेआउट

column-gapकॉलम बॉक्स के बीच अंतराल बनाने के लिए मल्टी-कॉलम लेआउट में दिखाई देता है, लेकिन ध्यान दें कि row-gapइसका कोई प्रभाव नहीं है क्योंकि हम केवल कॉलम में काम कर रहे हैं। gapअभी भी इस संदर्भ में उपयोग किया जा सकता है, लेकिन केवल column-gapवसीयत लागू की जाएगी।

जैसा कि आप अगले डेमो में देख सकते हैं, हालांकि gapसंपत्ति का मूल्य 2rem है, यह केवल स्तंभों में काम करने के बाद से दोनों दिशाओं के बजाय क्षैतिज रूप से आइटम को अलग कर रहा है:

जितना अधिक आप जानते हैं…

gapसंपत्ति के साथ काम करने के बारे में कुछ बातें ध्यान देने योग्य हैं।

यह अवांछित रिक्ति को रोकने का एक अच्छा तरीका है

क्या आपने कभी तत्वों के बीच अंतर पैदा करने के लिए मार्जिन का उपयोग किया है? यदि हम सावधान नहीं हैं, तो हम वस्तुओं के समूह से पहले और बाद में अतिरिक्त रिक्ति के साथ समाप्त हो सकते हैं।

विशिष्ट वस्तुओं से मार्जिन हटाने के लिए आमतौर पर नकारात्मक मार्जिन को जोड़ने या छद्म चयनकर्ताओं का सहारा लेने की आवश्यकता होती है। लेकिन gapअधिक आधुनिक लेआउट विधियों का उपयोग करने के बारे में अच्छी बात यह है कि आपके पास केवल आइटम के बीच जगह है। शुरू और अंत में अतिरिक्त cruft एक मुद्दा कभी नहीं है!

लेकिन, हे, आप आइटम के चारों ओर जगह है करना चाहते हैं का उपयोग करते समय gap, डाल paddingइस तरह कंटेनर के आसपास:

.container ( display: flex; gap: 1rem; padding: 1rem; )

गटर का आकार हमेशा गैप वैल्यू के बराबर नहीं होता है

gapसंपत्ति केवल एक चीज है कि आइटम के बीच की जगह रख सकते हैं नहीं है। मार्जिन, पैडिंग, justify-contentऔर align-contentगटर का आकार भी बढ़ा सकते हैं और वास्तविक gapमूल्य को प्रभावित कर सकते हैं ।

निम्नलिखित उदाहरण में, हम 1em सेट कर रहे हैं gap, लेकिन जैसा कि आप देख सकते हैं, वितरित संरेखण के उपयोग के कारण वस्तुओं के बीच बहुत अधिक जगह है, जैसे justify-contentऔर align-content:

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

फ़ीचर क्वेरी आमतौर पर यह जांचने का एक अच्छा तरीका है कि क्या ब्राउज़र किसी विशिष्ट संपत्ति का समर्थन करता है, लेकिन इस मामले में, यदि आप gapफ्लेक्सबॉक्स में संपत्ति की जांच करते हैं , तो आपको एक झूठी सकारात्मक मिल सकती है क्योंकि एक फीचर क्वेरी लेआउट मोड के बीच अंतर नहीं करेगी। दूसरे शब्दों में, यह एक फ्लेक्स लेआउट में समर्थित हो सकता है जिसके परिणामस्वरूप सकारात्मक परिणाम प्राप्त होता है, लेकिन यह वास्तव में समर्थित नहीं है यदि यह ग्रिड लेआउट में उपयोग किया जाता है।

जाली का नक्शा

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	16+	61+	66+	12+	53+ है

iOS सफारी	ओपेरा मोबाइल	Android ब्राउज़र	Android के लिए क्रोम	Android के लिए फ़ायरफ़ॉक्स
12+	नहीं न	81+	84+	68+ है

कैल्क () मूल्यों के साथ ग्रिड लेआउट

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	84+	79+	84+	नहीं न	69+

iOS सफारी	ओपेरा मोबाइल	Android ब्राउज़र	Android के लिए क्रोम	Android के लिए फ़ायरफ़ॉक्स
नहीं न	नहीं न	81+	84+	68+ है

प्रतिशत मान के साथ ग्रिड लेआउट

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	84+	79+	84+	नहीं न	69+

iOS सफारी	ओपेरा मोबाइल	Android ब्राउज़र	Android के लिए क्रोम	Android के लिए फ़ायरफ़ॉक्स
नहीं न	नहीं न	81+	84+	68+ है

फ्लेक्स लेआउट

gapफ्लेक्सबॉक्स के साथ उपयोग करने के लिए विनिर्देश कार्यशील मसौदा स्थिति में वर्तमान में है।

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
.४	63	नहीं न	.४	टी.पी.

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	नहीं न	नहीं न

बहु-स्तंभ लेआउट

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	84+	79+	84+	नहीं न	69+

iOS सफारी	ओपेरा मोबाइल	Android ब्राउज़र	Android के लिए क्रोम	Android के लिए फ़ायरफ़ॉक्स
नहीं न	नहीं न	81+	84+	68+ है

अधिक जानकारी

• सीएसएस बॉक्स संरेखण मॉड्यूल स्तर 3
• क्रोमियम लैंड्स फ्लेक्सबॉक्स गैप (टिकट # 761904)
• WebKit CSS फ़ीचर स्थिति

सम्बंधित

• जाली का नक्शा
• फ्लेक्सबॉक्स लेआउट
• मल्टी-कॉलम लेआउट