Подгридҳо дар CSS

Подгрид як навъи шабакаи дохилшаванда мебошад, вале бар хилофи он, ба андозаи контейнери шабакаи волидайн таъсир мерасонад. Барои муайян кардани подгрид бояд дар худи унсури фарзанд хосияти 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;
}

Результат: