CSS gap गुण

वर्णन और उपयोग

gap गुण फ्लैक्सबॉक्स, ग्रिड या बहुस्तम्भ लेआउट में वालों और स्तम्भों के बीच की अंतराल दूरी निर्धारित करता है।यह निम्नलिखित गुणों का शताब्दी गुण है:

ध्यान दें:gap गुण पहले grid-gap।

और देखें:

CSS टीचर नेल:CSS ग्रिड लेआउट

CSS टीचर नेल:CSS फ्लैक्स-बॉक्स लेआउट

CSS टीचर नेल:CSS बहुस्तम्भ लेआउट

CSS संदर्भ मानचित्र:row-gap गुण

CSS संदर्भ मानचित्र:column-gap गुण

इस्टांस

उदाहरण 1

वालों और स्तम्भों के बीच की अंतराल दूरी को 50px सेट करें:

.grid-container {
  gap: 50px;
}

स्वयं एक प्रयास करें

उदाहरण 2: ग्रिड लेआउट

ग्रिड लेआउट में वालों के अंतराल को 20px और स्तम्भों के अंतराल को 50px सेट करें:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

स्वयं एक प्रयास करें

उदाहरण 3: फ्लैक्स-बॉक्स लेआउट

फ्लैक्स-बॉक्स लेआउट में वालों के अंतराल को 20px और स्तम्भों के अंतराल को 70px सेट करें:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

स्वयं एक प्रयास करें

उदाहरण 4: बहुस्तम्भ लेआउट

बहुस्तम्भ लेआउट में स्तम्भों के अंतराल को 50px सेट करें:

#newspaper {
  columns: 3;
  gap: 50px;
}

स्वयं एक प्रयास करें

CSS ग्रामात

gap: row-gap column-gap|इनिशियल|इनहेरिट;
मान वर्णन
row-gap ग्रिड या फ्लैक्स-बॉक्स लेआउट में वालों के बीच की अंतराल दूरी सेट करें।
column-gap ग्रिड, फ्लैक्स-बॉक्स या बहुस्तम्भ लेआउट में स्तम्भों के बीच की अंतराल दूरी सेट करें।
इनिशियल इस गुण को उसके डिफ़ॉल्ट मान पर सेट करें।देखें: इनिशियल।
इनहेरिट इस गुण को अपने माता एलेमेंट से इनहेरिट करें।देखें: इनहेरिट।

तकनीकी विवरण

डिफ़ॉल्ट मान: नॉर्मल नॉर्मल
विरासत: नहीं
एनिमेशन निर्माण: समर्थित।अलग गुण को देखें।देखें:एनिमेशन से संबंधित गुण।
संस्करण: CSS बॉक्स एलिगेशन मॉड्यूल लेवल 3
जेसक्रिप्ट ग्रामात object.style.gap="50px 100px"

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

तालिका में नंबर इस गुण का पूर्ण समर्थन करने वाले पहले ब्राउज़र का संस्करण उल्लेख करते हैं।

लेआउट च्रोम IE / एज फ़ायरफ़ॉक्स सफ़ारी ओपेरा
ग्रिड में 66 16 61 12 53
फ्लैक्स-बॉक्स में 84 84 63 14.1 70
बहुस्तम्भ में 66 16 61 समर्थित नहीं 53