CSS में अंतर्निहित ग्रिड के आकार

अंतर्निहित ग्रिड स्वचालित रूप से उन तत्वों के आकार निर्धारित करता है जो इसकी सीमाओं से बाहर होते हैं। हालाँकि, आवश्यकता पड़ने पर इन आकारों को गुणों grid-auto-columns और grid-auto-rows का उपयोग करके परिभाषित किया जा सकता है।

आइए इसे करके देखते हैं:

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

css#parent {
  display: grid;
  
  grid-auto-columns: 100px;
  grid-auto-rows: 100px;
  
  grid-template-columns: 50px 50px 50px;
  grid-template-rows: 50px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}
#elem2 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
#elem3 {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}
#elem4 {
  grid-row: 4 / 5;
  grid-column: 4 / 5;
}

Результат: