Pertindihan Lajur dalam Grid CSS
Dalam situasi di mana beberapa elemen menduduki lajur yang sama, pertindihan mereka boleh diperhatikan, di mana setiap elemen seterusnya beralih ke baris di bawah.
Mari dalam grid kita, kita buat supaya elemen pertama terletak di baris pertama, elemen kedua - di baris kedua, dan elemen ketiga serta keempat - pada baris ketiga:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column: 1 / 4;
}
#elem2 {
grid-column: 2 / 3;
}
#elem3 {
grid-column: 1 / 2;
}
#elem4 {
grid-column: 3 / 4;
}
:
Laksanakan contoh berikut:
Laksanakan contoh berikut:
Laksanakan contoh berikut:
