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

grid-template गुण ग्रिड में तत्व द्वारा घेरी जाने वाली पंक्तियों और स्तंभों की संख्या और चौड़ाई निर्धारित करता है और grid-template-rows तथा grid-template-columns गुणों का संक्षिप्त रूप है। वे पंक्तियाँ और स्तंभ, जिन पर तत्व रखा जाएगा, उन्हें स्लैश के माध्यम से निर्दिष्ट किया जाता है। grid-template गुण मूल-तत्व में निर्दिष्ट किया जाता है और संतति-तत्वों के स्थान को परिभाषित करता है। गुण के मान में हम पंक्तियों या स्तंभों की चौड़ाई किसी भी आकार की इकाई में निर्दिष्ट करते हैं।

गुणों में पिक्सेल में मान निर्दिष्ट करने पर तत्वों के आकार उनके अनुरूप होंगे। यदि हम auto शब्द निर्दिष्ट करते हैं, तो स्तंभ और पंक्तियाँ सभी उपलब्ध स्थान को भर देंगे। fr (अंश) इकाई का उपयोग करने का अर्थ है कि सारे स्थान को समान भागों में विभाजित कर दिया जाएगा। fr का लाभ यह है कि यह विभिन्न कंटेनरों या स्क्रीन रिज़ॉल्यूशन के अनुकूल है, क्योंकि fr पिक्सेल में सटीक आकार से बंधे बिना उन्हें निर्दिष्ट संख्या में अंशों में विभाजित कर देता है।

सिंटैक्स

cssसिलेक्टर {
  grid-template: पंक्तियों की चौड़ाई और संख्या / स्तंभों की चौड़ाई और संख्या;
}

उदाहरण

आइए grid-template गुण की सहायता से एक तालिका बनाएं:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

और अब आइए दूसरी और तीसरी पंक्ति को समान चौड़ाई दें, और प्रत्येक स्तंभ को - भिन्न चौड़ाई दें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

उदाहरण

और अब पिछले उदाहरण की तालिका में शीर्ष पंक्ति की चौड़ाई दो अंश की करें, और पहला स्तंभ - आधे अंश का करें:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

यह भी देखें