Số lượng và chiều rộng hàng trong CSS Grid
Các phần tử grid cũng có thể được sắp xếp theo hàng. Thuộc tính grid-template-rows được sử dụng cho mục đích này. Thuộc tính này nhận kích thước của các hàng, phân tách bằng dấu cách. Trong đó, chúng ta có thể áp dụng các giá trị giống như đã học đối với cột.
Ví dụ
Ví dụ, hãy sắp xếp các khối thành bốn hàng:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Hãy chỉ định chiều rộng cố định bằng pixel cho hàng thứ nhất và thứ ba, còn hàng thứ hai chiếm không gian còn lại:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Sử dụng hàm repeat để chỉ định kích thước các hàng:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Ví dụ
Gán chiều cao 50px cho các hàng, và đặt số lượng hàng tự động bằng giá trị auto-fill:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Bài tập thực hành
Sắp xếp các khối thành ba hàng.
Hãy để khối thứ nhất có kích thước 100px,
khối thứ hai 150px,
và khối thứ ba 200px.
Giả sử grid của bạn có ba hàng. Hãy làm cho chúng có chiều rộng bằng nhau.
