सीएसएस में सबग्रिड

सबग्रिड एक नेस्टेड ग्रिड का एक प्रकार है, लेकिन इसके विपरीत यह पैरेंट ग्रिड कंटेनर के आकार को प्रभावित करता है। सबग्रिड सेट करने के लिए, चाइल्ड एलिमेंट में display प्रॉपर्टी को subgrid वैल्यू के साथ सेट करना होगा।

उदाहरण के लिए, आइए चौथे एलिमेंट में एक नेस्टेड ग्रिड बनाते हैं:

html<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>

css#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;
}

Результат: