ग्रिड-टेम्पलेट-एरिया गुण

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

सिंटैक्स

cssसिलेक्टर {
  grid-template-areas: चाइल्ड एलिमेंट्स के नाम;
}

उदाहरण

आइए हमारे ग्रिड में तत्वों का स्थान निर्धारित करें:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}

#parent {
  display: grid;
  grid-template-areas: 'second first third';
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

और अब आइए कुछ तत्वों के नामों के बजाय डॉट '.' निर्दिष्ट करें। निष्पादित कोड के परिणाम से देखा जा सकता है कि इस मामले में लेआउट में एक खाली ब्लॉक होगा:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#elem1 {
  grid-area: first;
}
#elem2 {
  grid-area: second;
}
#elem3 {
  grid-area: third;
}
#parent {
  display: grid;
  grid-template-areas: 'first . second third';
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

यह भी देखें