CSS ग्रिड-टेम्पलेट प्रतियोगिता

रिकार्ड और उपयोग

grid-template एट्रिब्यूट निम्नलिखित एट्रिब्यूटों का छोट सा रूप है:

और देखें:

CSS शिक्षा:CSS ग्रिड प्रोजेक्ट

CSS संदर्भ पुस्तिका:grid-area एट्रिब्यूट

CSS संदर्भ पुस्तिका:grid-template-rows एट्रिब्यूट

CSS संदर्भ पुस्तिका:grid-template-columns एट्रिब्यूट

CSS संदर्भ पुस्तिका:grid-template-areas एट्रिब्यूट

उदाहरण

उदाहरण 1

फर्स्ट कोलम के लिए 150 पिक्सल ऊंचाई वाले तीन कोलम ग्रिड लेआउट बनाएं:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

स्वयं एक प्रयोग करें

उदाहरण 2

दो पंक्तियों को निर्धारित करें, जिसमें 'item1' पहले दो पंक्तियों के पहले दो स्तम्भों में होगा (पांच स्तम्भ लेआउट में):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

स्वयं एक प्रयोग करें

उदाहरण 3

सभी प्रकल्पों का नामकरण करें और एक तैयार वेब पैटर्न बनाएं:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

स्वयं एक प्रयोग करें

CSS व्याकरण

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
गुण मान
मान वर्णन
none मूलभूत मान. स्तम्भ या पंक्तियों का आकार निर्धारित नहीं किया जाता。
grid-template-rows / grid-template-columns स्तम्भ और पंक्तियों का आकार निर्धारित करें。
grid-template-areas नामकरण प्रकल्प का उपयोग करके ग्रिड लेआउट का उपयोग करने का नियम निर्धारित करें。
initial इस विशेषता को उसके मूलभूत मान पर सेट करें. देखें: initial。
inherit इस विशेषता को उसके माता एलेमेंट से विरासत करें. देखें: inherit。

तकनीकी विवरण

मूलभूत मान: none none none
विरासत: नहीं
एनीमेशन निर्माण: समर्थन है. देखें:एनीमेशन से संबंधित विशेषताएँ。
संस्करण： CSS Grid Layout Module Level 1
JavaScript व्याकरणः object.style.gridTemplate="250px / auto auto"

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

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

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