हर सामान्य CSS ग्रिड प्रॉपर्टी, यह बताते हुए कि वह कहाँ लागू होती है: कंटेनर पर, आइटम पर और साइज़िंग यूनिट पर। हर पंक्ति में प्रॉपर्टी के साथ उसके सामान्य मान दिए गए हैं।
ग्रिड एलिमेंट्स को दो दिशाओं में सजाता है: पंक्तियाँ और कॉलम एक साथ। पैरेंट पर display: grid लगाएँ, grid-template-columns और grid-template-rows से ट्रैक परिभाषित करें, और चिल्ड्रन को सेल में रखें। पेज और कार्ड लेआउट के लिए ग्रिड चुनें; एक-दिशा वाली बार के लिए फ्लेक्सबॉक्स। दोनों आपस में आराम से जुड़ जाते हैं।
संदर्भ तालिका · 33 प्रविष्टियाँ
CSS ग्रिडExplained
33 of 33 rows
कंटेनर
grid | inline-grid
एलिमेंट को ग्रिड कंटेनर बना देती है।
1fr 1fr | repeat(3, 1fr) | 200px 1fr
कॉलम और उनकी चौड़ाई परिभाषित करती है।
auto 1fr auto
पंक्तियाँ और उनकी ऊँचाई परिभाषित करती है।
[main-start] 1fr [main-end]
टेम्पलेट में ग्रिड लाइनों को नाम देती है और आइटम को उन्हीं नामों से रखती है।
1rem | 8px 16px
पंक्तियों और कॉलम के बीच की जगह।
"header header" "nav main"
पढ़ने में आसान प्लेसमेंट के लिए सेल को नाम देती है।
"head head" 64px "nav main" 1fr / 200px 1fr
पंक्ति, कॉलम और एरिया एक ही शॉर्टहैंड में सेट करती है।
repeat(2, 1fr) / auto-flow 80px
हर ट्रैक प्रॉपर्टी और grid-auto-flow को एक ही डिक्लेरेशन में सेट करती है।
minmax(80px, auto)
उन पंक्तियों की ऊँचाई सेट करती है जिन्हें टेम्पलेट परिभाषित नहीं करता।
120px | minmax(0, 1fr)
उन कॉलम की चौड़ाई सेट करती है जिन्हें टेम्पलेट परिभाषित नहीं करता।
row | column | row dense
बिना रखे आइटम के लिए ऐक्सिस चुनती है; dense पहले के गैप भर देता है।
start | center | end | stretch
हर आइटम को उसके सेल में पंक्ति ऐक्सिस की दिशा में अलाइन करती है।
start | center | end | stretch
हर आइटम को उसके सेल में कॉलम ऐक्सिस की दिशा में अलाइन करती है।
center | start end
align-items और justify-items को एक ही डिक्लेरेशन में सेट करती है।
start | center | space-between
ट्रैक ग्रिड को कंटेनर के अंदर पंक्ति ऐक्सिस की दिशा में अलाइन करती है।
start | center | space-between
ट्रैक ग्रिड को कंटेनर के अंदर कॉलम ऐक्सिस की दिशा में अलाइन करती है।
center | end start
align-content और justify-content को एक ही डिक्लेरेशन में सेट करती है।
आइटम
1 / 3 | span 2
आइटम को कॉलम पर रखती है या कई कॉलम पर फैलाती है।
1 / 2 | span 3
आइटम को पंक्तियों पर रखती है या कई पंक्तियों पर फैलाती है।
grid-column: 2 / -1
लाइनों को ग्रिड के अंत से गिनती है; -1 आख़िरी लाइन है।
header | 1 / 1 / 2 / 3
आइटम को नाम देती है या एक ही शॉर्टहैंड में पूरी तरह रखती है।
start | center | end | stretch
सिर्फ़ इस एक आइटम को उसके सेल में पंक्ति ऐक्सिस की दिशा में अलाइन करती है।
start | center | end | stretch
सिर्फ़ इस एक आइटम को उसके सेल में कॉलम ऐक्सिस की दिशा में अलाइन करती है।
center | start end
align-self और justify-self को एक ही डिक्लेरेशन में सेट करती है।
साइज़िंग यूनिट
1fr | 2fr
ट्रैक की खाली जगह का एक हिस्सा।
auto | 1fr auto
ट्रैक का साइज़ उसके कंटेंट से तय करती है; अलाइनमेंट उसे खींच सकता है।
min-content | max-content
ट्रैक का साइज़ उसके सबसे छोटे या सबसे बड़े कंटेंट तक तय करती है।
fit-content(180px)
ट्रैक का साइज़ कंटेंट से तय करती है लेकिन दी गई सीमा से आगे नहीं।
minmax(200px, 1fr)
ट्रैक को एक मिनिमम और मैक्सिमम के बीच बाँधती है।
repeat(4, 1fr)
ट्रैक पैटर्न को हर एक अलग से लिखे बिना दोहराती है।
repeat(auto-fit, minmax(120px, 1fr))
जितने ट्रैक फिट हों उतने जोड़ती है; auto-fit खाली ट्रैक को सिमटा देता है।
grid-template-columns: subgrid
नेस्टेड ग्रिड को पैरेंट के ट्रैक और लाइन नाम साझा करने देती है।
grid-template-rows: masonry
प्रयोगात्मक: आइटम को फ़िक्स पंक्तियों की जगह ऊँचाई के हिसाब से कॉलम में सजाती है।