CSS ग्रिड-गैप प्रतियोगिता

परिभाषा और उपयोग

grid-gap गुण ग्रिड लेआउट में ग्रिड-रो और स्तम्भ के बीच के अंतराल का आकार निर्धारित करता है।यह निम्नलिखित गुणों का लघुरूप है:

ध्यान दें:यह गुण CSS3 में नया नाम दिया गया है gap。

अन्य संदर्भ:

CSS शिक्षा:CSS ग्रिड लेआउट

CSS संदर्भ दस्तावेज़:grip-row-gap गुण

CSS संदर्भ दस्तावेज़:grip-column-gap गुण

उदाहरण

उदाहरण 1

ग्रिड-रो और स्तम्भ के बीच का लघुरूप सेट करें 50 पिक्सल:

.grid-container {
  grid-gap: 50px;
}

अपने आप सबसे जाँचें

उदाहरण 2

ग्रिड-रो अंतराल को 20 पिक्सल और स्तम्भ-अंतराल को 50 पिक्सल सेट करें:

.grid-container {
  grid-gap: 20px 50px;
}

अपने आप सबसे जाँचें

CSS व्याकरण

grid-gap: grid-row-gap grid-column-gap;

गुण मान

मान वर्णन
grid-row-gap ग्रिड लेआउट में ग्रिड-रो अंतराल का आकार सेट करें।मूलभूत मान 0 है।
grid-column-gap स्तम्भों के अंतराल का आकार सेट करें।मूलभूत मान 0 है।

तकनीकी विवरण

मूलभूत मान: 0 0
विरासत: नहीं
एनिमेशन निर्माण: समर्थित है।देखें:एनिमेशन संबंधी गुण。
संस्करण： CSS Grid Layout Module Level 1
JavaScript व्याकरण： object.style.gridGap="50px 100px"

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

तालिका में दिए गए नंबर कोई भी ब्राउज़र में इस गुण के पूर्ण समर्थन वाला पहला संस्करण है।

च्रोम IE / एज फायरफॉक्स सैफारी ओपेरा
57 16 52 10 44