नेस्टेड CSS ग्रिड
ग्रिड सिस्टम में हमारे द्वारा बनाए गए ग्रिड के अंदर एक नया नेस्टेड ग्रिड जोड़ने की सुविधा होती है। नेस्टेड ग्रिड का व्यापक रूप से वेबसाइट ब्लॉक्स के अंदर छोटे एलिमेंट्स को प्लेस करने के लिए उपयोग किया जाता है।
इस सुविधा का उपयोग करने के लिए, चाइल्ड एलिमेंट के अंदर प्रॉपर्टी
display को वैल्यू grid के साथ सेट करना होता है।
उदाहरण के लिए, आइए ग्रिड के एक सेल के अंदर एक और ग्रिड बनाएं:
<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: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 5px;
border: 2px solid #696989;
}
#elem4 > div {
grid-gap: 5px;
padding: 6px;
box-sizing: border-box;
border: 1px solid #696989;
}
:
मान लीजिए आपके पास पांच एलिमेंट्स वाला एक ग्रिड है, जो तीन कॉलम में व्यवस्थित है। दूसरे एलिमेंट के अंदर एक नेस्टेड ग्रिड बनाएं, जिसमें बदले में तीन चाइल्ड एलिमेंट हों।
पिछले टास्क को इस तरह बदलें कि नेस्टेड ग्रिड के अंदर पांच चाइल्ड एलिमेंट हों।
पहले और तीसरे एलिमेंट में प्रत्येक में तीन चाइल्ड एलिमेंट वाला एक नेस्टेड ग्रिड बनाएं।
