CSS Grid Bersarang

Dalam sistem grid, ada kemungkinan untuk menambahkan grid bersarang baru ke dalam grid yang telah dibuat. Grid bersarang banyak digunakan untuk menempatkan elemen-elemen kecil di dalam blok situs. Untuk menggunakan kemungkinan ini, Anda perlu menetapkan properti display dengan nilai grid pada elemen anak itu sendiri.

Sebagai contoh, mari kita buat grid lain di dalam salah satu sel grid:

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

Результат: