CSS grid-area गुण

विनिर्धारण और उपयोग

grid-area गुण ग्रिड परियोजना के आयाम और ग्रिड लेआउट में स्थिति को निर्धारित करता है और निम्नलिखित गुणों का एकल गुण है:

grid-area गुण को ग्रिड आयाम के लिए भी इस्तेमाल किया जा सकता है। फिर, ग्रिड कंटेनर के माध्यम से ग्रिड आयाम के लिए नाम आबंटित किया जा सकता है। grid-template-areas गुण को नामित ग्रिड परियोजना देखें। नीचे के उदाहरण को देखें।

अन्य संदर्भ:

CSS शिक्षा:CSS ग्रिड लेआउट

उदाहरण

उदाहरण 1

इस प्रकार "item1" को पंक्ति 2 स्तम्भ 1 से शुरू करें और दो पंक्तियों तथा तीन स्तम्भों में फैलाएं:

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

खुद आयात करें

सूचना:पृष्ठ के नीचे अधिक उदाहरण उपलब्ध हैं।

CSS व्याकरण

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

गुण मूल्य

मूल्य वर्णन
grid-row-start निर्धारित करें कि परियोजना किस पंक्ति से प्रदर्शित होने लगे।
grid-column-start निर्धारित करें कि परियोजना किस स्तम्भ से प्रदर्शित होने लगे।
grid-row-end प्रोजेक्ट को देखने के लिए कौन सी पंक्ति रेखा बंद करना है या कितनी पंक्तियों को पार करना है।
grid-column-end प्रोजेक्ट को देखने के लिए कौन सा स्तम्भ रेखा बंद करना है या कितने स्तम्भों को पार करना है या कितने पंक्तियों को पार करना है।
itemname ग्रिड प्रोजेक्ट की वस्तु को निर्धारित करता है。

तकनीकी विवरण

मूलभूत मान: auto / auto / auto / auto
विरासत: नहीं
एनीमेशन निर्माण: समर्थन।देखें:एनीमेशन से संबंधित गुण。
संस्करण: CSS Grid Layout Module Level 1
जेसक्रिप्ट ग्रामाता: object.style.gridArea="1 / 2 / span 2 / span 3"

और अधिक उदाहरण

उदाहरण 2

Item1 को 'myArea' नाम दिया गया है और पांच स्तम्भ ग्रिड लेआउट में सभी पांच स्तम्भ फैलाया गया है:

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

खुद आयात करें

उदाहरण 3

"myArea" को पांच स्तम्भ ग्रिड लेआउट में दो स्तम्भ फैलाएं (बिंदु के रूप में सूचक वस्तु का नाम नहीं है):

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

खुद आयात करें

उदाहरण 4

"item1" को दो स्तम्भ और दो पंक्तियों में फैलाएं:

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

खुद आयात करें

उदाहरण 5

सभी वस्तुओं का नाम दें और एक तैयार वेब पैटर्न बनाएं:

.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';
}

खुद आयात करें

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

तालिका में दिए गए नंबरों से पूरी तरह से इस गुण को समर्थन देने वाले पहले ब्राउज़र का संस्करण को सूचित किया गया है。

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