CSS ग्रिड-टेम्पलेट-कोलम प्रतियोगिता
- पिछला पृष्ठ grid-template-areas
- अगला पृष्ठ grid-template-rows
विनिर्धारण और उपयोग
grid-template-columns गुण ग्रिड लेआउट में स्तम्भ की संख्या (और चौड़ाई) को निर्धारित करता है。
ये मान एक अलगाव के साथ अलगाव की सूची है, जिसमें प्रत्येक मान को संबंधित स्तम्भ के आकार को सूचित किया जाता है。
और देखें:
CSS पाठ्यक्रम:CSS ग्रिड लेआउट
CSS संदर्भ दस्तावेज़:grid-template-rows गुण
CSS संदर्भ दस्तावेज़:grid-template गुण
उदाहरण
उदाहरण 1
चार स्तम्भ का ग्रिड कंटेनर बनाएं:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
उदाहरण 2
एक चार स्तम्भ के ग्रिड लेआउट बनाएं और प्रत्येक स्तम्भ के आकार को निर्धारित करें:
.grid-container {
display: grid;
grid-template-columns: 30px 200px auto 100px;
}
CSS व्याकरण
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
गुण मान
| मान | वर्णन |
|---|---|
| none | मूलभूत मान. जब आवश्यक हो तो स्तम्भ बनाएं。 |
| auto | स्तम्भ का आकार कंटेनर के आकार और स्तम्भ में एलेमेंट के सामग्री के आकार पर निर्भर करता है。 |
| max-content | स्तम्भ का आकार प्रत्येक स्तम्भ में सबसे बड़े एलेमेंट के आकार पर निर्भर करता है。 |
| min-content | स्तम्भ का आकार प्रत्येक स्तम्भ में सबसे छोटे एलेमेंट के आकार पर निर्भर करता है。 |
| length | स्तम्भ के आकार को सेट करें, वैध लंबाई मान का उपयोग करके. देखेंलंबाई इकाई。 |
| initial | इस गुण को उसके मूलभूत मान पर सेट करें. देखें initial。 |
| inherit | इस गुण को उसके माता एलेमेंट से विरासत करें. देखें inherit。 |
तकनीकी विवरण
| मूलभूत मान: | none |
|---|---|
| विरासत: | नहीं |
| एनिमेशन निर्माण: | समर्थित. देखें:एनिमेशन से संबंधित गुण。 |
| संस्करण: | CSS Grid Layout Module Level 1 |
| JavaScript व्याकरण: | object.style.gridTemplateColumns="50px 50px 50px" |
ब्राउज़र समर्थन
तालिका में दिए गए नंबर इस गुण के पूर्ण समर्थन वाले पहले ब्राउज़र का संस्करण को सूचित करते हैं。
| च्रोम | IE / एज | फायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- पिछला पृष्ठ grid-template-areas
- अगला पृष्ठ grid-template-rows
