CSS Grid lồng nhau
Trong hệ thống grid, có khả năng thêm một grid lồng nhau mới vào chính grid đã tạo. Các grid lồng nhau được sử dụng rộng rãi để bố trí các phần tử nhỏ bên trong các khối của trang web.
Để sử dụng khả năng này, bạn cần đặt thuộc tính
display với giá trị grid cho chính phần tử con.
Ví dụ, hãy tạo một grid khác bên trong một ô của grid:
<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: 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;
}
:
Giả sử bạn có một grid bao gồm năm phần tử, được sắp xếp theo ba cột. Hãy tạo một grid lồng nhau bên trong phần tử thứ hai, và trong grid đó có ba phần tử con.
Thay đổi bài tập trước đó sao cho trong grid lồng nhau có năm phần tử con.
Tạo một grid lồng nhau với ba phần tử con trong phần tử thứ nhất và thứ ba.
