CSS ग्रिड-टेम्पलेट-एरियाज प्रकृति
- पिछला पृष्ठ grid-template
- अगला पृष्ठ grid-template-columns
परिभाषा और उपयोग
grid-template-areas गुण ग्रिड लेआउट में क्षेत्र निर्धारित करता है।
आप का उपयोग कर सकते हैं grid-area गुण नामेंगी ग्रिड प्रोजेक्ट करें, फिर grid-template-areas गुण में उस नाम को उदाहरण करें।
प्रत्येक क्षेत्र सेट को कोवा के द्वारा परिभाषित है। नाम के रूप में अनाम ग्रिड प्रोजेक्ट को दूरी के द्वारा उद्धृत करें।
अन्य संदर्भ:
CSS शिक्षा:CSS ग्रिड प्रयोग
CSS संदर्भ पुस्तक:grid-area विशेषता
CSS संदर्भ पुस्तक:grid-template विशेषता
उदाहरण
उदाहरण 1
नाम करने वाली वस्तु 'myArea' को पांच स्तम्भ ग्रिड लेआउट में दो स्तम्भों में फैलाना है:
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas: "myArea myArea . . .";
}
उदाहरण 2
दो पंक्तियों को निर्धारित करें, जिसमें 'item1' पहले दो पंक्तियों में पहले दो स्तम्भों में फैला (पांच स्तम्भ ग्रिड लेआउट में):
.item1 {
grid-area: myArea;
}
.grid-container {
display: grid;
grid-template-areas:
'myArea myArea . . .'
'myArea myArea . . .';
}
उदाहरण 3
सभी वस्तुओं का नाम करें और एक तैयार वेबपेज टैम्प्लेट बनाएं:
.item1 {
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header'
'menu main main main right right'
'menu footer footer footer footer';
}
CSS व्याकरण
grid-template-areas: none|itemnames;
विशेषता मान
| मान | वर्णन |
|---|---|
| none | मूलभूत मान। नाम के रूप में अनाम ग्रिड क्षेत्र (grid areas) नहीं हैं। |
| itemnames | क्या प्रत्येक स्तम्भ और पंक्ति को कैसे प्रदर्शित करना है इसे निर्धारित करने वाली अनुक्रम श्रृंखला। |
तकनीकी विवरण
| मूलभूत मान: | none |
|---|---|
| विरासत: | नहीं |
| एनीमेशन निर्माण: | समर्थन है। देखें:एनीमेशन संबंधी विशेषताएँ。 |
| संस्करण: | CSS Grid Layout Module Level 1 |
| जेसक्रिप्ट व्याकरण: | object.style.gridTemplateAreas=". . . myArea myArea" |
ब्राउज़र समर्थन
तालिका में दिए गए नंबर के द्वारा पूरी तरह से समर्थित इस विशेषता का पहला ब्राउज़र संस्करण उल्लेखित है।
| च्रोम | IE / एज | फ़ायरफॉक्स | सफारी | ओपेरा |
|---|---|---|---|---|
| 57 | 16 | 52 | 10 | 44 |
- पिछला पृष्ठ grid-template
- अगला पृष्ठ grid-template-columns
