Įdėtiniai CSS tinkleliai

Tinklelio sistemoje yra galimybė į savo sukurtą tinklelį pridėti naują įdėtinį tinklelį. Įdėtiniai tinkleliai plačiai naudojami talpinant mažus elementus svetainės blokuose. Norint pasinaudoti šia galimybe, reikia pačiame vaikiniame elemente nustatyti savybę display su reikšme grid.

Pavyzdžiui, vienoje iš tinklelio ląstelių sukurkime dar vieną tinklelį:

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: 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;
}

Результат: