CSS Subgrid
Subgrid là một biến thể của lưới lồng nhau,
nhưng không giống như lưới lồng nhau, nó ảnh hưởng đến kích thước
của phần tử cha chứa lưới.
Để thiết lập một subgrid, bạn cần
đặt thuộc tính display với giá trị subgrid
trong chính phần tử con.
Ví dụ, hãy tạo một lưới lồng nhau trong phần tử thứ tư:
<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;
}
:
Giả sử bạn có một lưới bao gồm năm phần tử, được sắp xếp thành hai cột. Hãy tạo một lưới lồng nhau trong phần tử thứ ba, lưới này lần lượt chứa hai phần tử con.
Hãy thay đổi bài toán trước đó sao cho trong lưới lồng nhau có bốn phần tử con.
Tạo hai lưới lồng nhau - trong phần tử thứ hai và phần tử thứ năm.
