Verschachtelte CSS Grids

Im Grid-System besteht die Möglichkeit, ein neues verschachteltes Grid in das selbst erstellte Raster einzufügen. Verschachtelte Grids werden häufig verwendet, um kleine Elemente innerhalb von Website-Blöcken anzuordnen. Um diese Möglichkeit zu nutzen, muss in dem Kindelement selbst die Eigenschaft display mit dem Wert grid gesetzt werden.

Lassen Sie uns als Beispiel in einer der Zellen des Grids ein weiteres Grid erstellen:

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

Результат: