CSS ग्रिड-क्षेत्र संपत्ति
उदाहरण
पंक्ति 2 कॉलम 1 पर "आइटम 1" शुरू करें, और 2 पंक्तियों और 3 कॉलमों को फैलाएं:
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
grid-areaगुण ग्रिड लेआउट में ग्रिड आइटम के आकार और स्थान को निर्दिष्ट करता है, और निम्नलिखित गुणों के लिए एक शॉर्टहैंड गुण है :
grid-areaसंपत्ति का उपयोग ग्रिड आइटम को नाम निर्दिष्ट करने के लिए भी किया जा सकता है । नामित ग्रिड आइटम को ग्रिड कंटेनर की ग्रिड-टेम्पलेट-क्षेत्र संपत्ति द्वारा संदर्भित किया जा सकता है
। नीचे उदाहरण देखें।
| डिफ़ॉल्ट मान: | कार / कार / कार / कार |
|---|---|
| विरासत में मिला: | नहीं |
| एनिमेटेबल: | हां। एनिमेटेबल के बारे में पढ़ें |
| संस्करण: | CSS ग्रिड लेआउट मॉड्यूल स्तर 1 |
| जावास्क्रिप्ट सिंटैक्स: | वस्तु .style.gridArea="1/2 / अवधि 2 / अवधि 3" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
| Property | |||||
|---|---|---|---|---|---|
| grid-area | 57 | 16 | 52 | 10 | 44 |
सीएसएस सिंटेक्स
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
सम्पत्ति की कीमत
| Value | Description |
|---|---|
| grid-row-start | Specifies on which row to start displaying the item. |
| grid-column-start | Specifies on which column to start displaying the item. |
| grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
| grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
| itemname | Specifies a name for the grid item |
और ज्यादा उदाहरण
उदाहरण
Item1 को "myArea" नाम मिलता है, और पांच कॉलम ग्रिड लेआउट में सभी पांच कॉलम फैलाता है:
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
उदाहरण
"माईएरिया" को पांच कॉलम ग्रिड लेआउट में दो कॉलम फैलाने दें (अवधि के संकेत बिना नाम वाले आइटम का प्रतिनिधित्व करते हैं):
.item1 {
grid-area: myArea;
}
.grid-container {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
उदाहरण
"आइटम 1" को दो कॉलम और दो पंक्तियों में बनाएं:
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea
myArea . . .';
}
उदाहरण
सभी मदों को नाम दें, और एक उपयोग के लिए तैयार वेबपेज टेम्पलेट बनाएं:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस ग्रिड लेआउट