CSS में अंतर्निहित ग्रिड के आकार
अंतर्निहित ग्रिड स्वचालित रूप से उन तत्वों के आकार निर्धारित करता है
जो इसकी सीमाओं से बाहर होते हैं। हालाँकि, आवश्यकता पड़ने पर
इन आकारों को गुणों grid-auto-columns और
grid-auto-rows का उपयोग करके परिभाषित किया जा सकता है।
आइए इसे करके देखते हैं:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#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;
}
:
मान लें कि आपकी ग्रिड में 9 ब्लॉक हैं।
कुछ ब्लॉकों को स्पष्ट ग्रिड में रखें,
और कुछ ब्लॉकों को अंतर्निहित ग्रिड में रखें।
अंतर्निहित भाग के ब्लॉकों के आकार निर्धारित करें।
