Kích thước của các lưới ẩn trong CSS
Lưới ẩn tự xác định kích thước của các phần tử
vượt ra ngoài phạm vi của nó. Tuy nhiên, khi
cần thiết, các kích thước này có thể được đặt bằng
các thuộc tính grid-auto-columns và
grid-auto-rows.
Hãy thực hiện điều đó:
<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;
grid-auto-columns: 100px;
grid-auto-rows: 100px;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-row: 1 / 2;
grid-column: 1 / 2;
}
#elem2 {
grid-row: 2 / 3;
grid-column: 2 / 3;
}
#elem3 {
grid-row: 3 / 4;
grid-column: 3 / 4;
}
#elem4 {
grid-row: 4 / 5;
grid-column: 4 / 5;
}
:
Giả sử trong lưới của bạn có 9 khối.
Hãy đặt một số khối trong lưới hiện
và một số khối trong phần ẩn.
Đặt kích thước cho các khối trong phần ẩn.
