सीएसएस में सबग्रिड
सबग्रिड एक नेस्टेड ग्रिड का एक प्रकार है,
लेकिन इसके विपरीत यह पैरेंट ग्रिड कंटेनर के आकार को
प्रभावित करता है।
सबग्रिड सेट करने के लिए, चाइल्ड एलिमेंट में
display प्रॉपर्टी को
subgrid वैल्यू के साथ सेट करना होगा।
उदाहरण के लिए, आइए चौथे एलिमेंट में एक नेस्टेड ग्रिड बनाते हैं:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
#parent {
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem4 {
display: subgrid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
padding: 5px;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
मान लें कि आपके पास पांच एलिमेंट्स वाला एक ग्रिड है, जो दो कॉलम में व्यवस्थित है। तीसरे एलिमेंट में एक नेस्टेड ग्रिड बनाएं, जिसमें बदले में दो चाइल्ड एलिमेंट हों।
पिछले कार्य को इस प्रकार बदलें, कि नेस्टेड ग्रिड में चार चाइल्ड एलिमेंट हों।
दो नेस्टेड ग्रिड बनाएं - दूसरे एलिमेंट और पांचवें एलिमेंट में।
