Subgrid di CSS
Subgrid adalah varian dari grid bersarang,
namun tidak seperti grid bersarang, ia mempengaruhi ukuran
grid container induknya.
Untuk mengatur subgrid, Anda perlu
mengatur properti display pada elemen anak itu sendiri
dengan nilai subgrid.
Sebagai contoh, mari kita buat grid bersarang di elemen keempat:
<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>
#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;
}
:
Misalkan Anda memiliki grid yang terdiri dari lima elemen, disusun dalam dua kolom. Buatlah grid bersarang di elemen ketiga, yang di dalamnya terdapat dua elemen anak.
Ubah tugas sebelumnya sehingga dalam grid bersarang terdapat empat elemen anak.
Buatlah dua grid bersarang - di elemen kedua dan elemen kelima.
