Chồng lấp cột trong CSS Grid
Trong tình huống khi nhiều phần tử chiếm cùng một cột, có thể quan sát thấy sự chồng lấp của chúng, trong đó mỗi phần tử tiếp theo được dịch chuyển xuống một hàng bên dưới.
Hãy làm cho trong grid của chúng ta phần tử đầu tiên nằm ở hàng đầu tiên, phần tử thứ hai - ở hàng thứ hai, còn phần tử thứ ba và thứ tư - ở hàng thứ ba:
<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;
}
:
Thực hiện ví dụ sau:
Thực hiện ví dụ sau:
Thực hiện ví dụ sau:
