Thuộc tính grid-template-rows trong CSS
Bùi Tấn Lực - 808
- 14/10/2025
Chức năng của Thuộc tính grid-template-rows trong CSS
Thuộc tính grid-template-rows trong CSS dùng để quy định chiều cao của từng hàng theo đơn vị px, %, auto và có thể lặp lại những hàng đã quy định chiều cao cho các hàng phía sau, thuộc tính này kết hợp với giá trị grid của thuộc tính display.
Các giá trị của Thuộc tính grid-template-rows trong CSS
auto: Chiều cao của hàng sẽ tự động nếu để chế độ auto, vị trí thứ 1 là hàng thứ 1, vị trí thừ 2 là hàng thứ 2, cứ thế tăng lên dần.
px: Quy định chiều cao của từng hàng bằng đơn vị px, vị trí thứ 1 là hàng thứ 1, vị trí thừ 2 là hàng thứ 2, cứ thế tăng lên dần.
%: Quy định chiều cao của từng hàng bằng đơn vị %, tổng % của các hàng là 100%, vị trí thứ 1 là hàng thứ 1, vị trí thừ 2 là hàng thứ 2, cứ thế tăng lên dần.
repeat: Bên trái dấu phẩy là số lần lặp các hàng được quy định ở bên phải dấu phẩy, bên phải dấu phẩy là số hàng được quy định chiều cao, số hàng được quy định từ 1 trở lên, bạn có thể quy định nhiều hàng để lặp lại.
Code Thuộc tính grid-template-rows trong CSS
Thuộc tính grid-template-rows auto trong CSS
Chiều cao của hàng sẽ tự động nếu để chế độ auto, vị trí thứ 1 là hàng thứ 1, vị trí thừ 2 là hàng thứ 2, cứ thế tăng lên dần:
grid-template-rows: auto auto; Hàng 1 auto, Hàng 2 auto
grid-template-rows: auto auto 120px; Hàng 1 auto, Hàng 2 auto, Hàng 3 120px
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-rows auto trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px; grid-template-columns: auto auto;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-rows auto trong CSS</h1>
<p>Chiều cao của hàng sẽ tự động nếu để chế độ auto:</p>
<h4>Hàng 1 auto, Hàng 2 auto</h4>
<div class="divcha" style="grid-template-rows: auto auto;">
<div>auto auto; 1</div>
<div>auto auto; 2</div>
<div>auto auto; 3</div>
<div>auto auto; 4</div>
<div>auto auto; 5</div>
<div>auto auto; 6</div>
</div>
<h4>Hàng 1 auto, Hàng 2 auto, Hàng 3 120px</h4>
<div class="divcha" style="grid-template-rows: auto auto 120px;">
<div>auto auto 120px; 1</div>
<div>auto auto 120px; 2</div>
<div>auto auto 120px; 3</div>
<div>auto auto 120px; 4</div>
<div>auto auto 120px; 5</div>
<div>auto auto 120px; 6</div>
</div>
</body>
</html>
Thuộc tính grid-template-rows px trong CSS
Quy định chiều cao của từng hàng bằng đơn vị px, vị trí thứ 1 là hàng thứ 1, vị trí thừ 2 là hàng thứ 2, cứ thế tăng lên dần:
grid-template-rows: 100px 150px; Hàng 1 100px, Hàng 2 150px
grid-template-rows: 100px 110px 120px; Hàng 1 100px, Hàng 2 110px, Hàng 3 120px
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-rows px trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px; grid-template-columns: auto auto;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-rows px trong CSS</h1>
<p>Quy định chiều cao của từng hàng bằng đơn vị px, vị trí thứ 1 là hàng thứ 1, vị trí thừ 2 là hàng thứ 2, cứ thế tăng lên dần:</p>
<h4>Hàng 1 100px, Hàng 2 150px</h4>
<div class="divcha" style="grid-template-rows: 100px 150px;">
<div>100px 150px; 1</div>
<div>100px 150px; 2</div>
<div>100px 150px; 3</div>
<div>100px 150px; 4</div>
<div>100px 150px; 5</div>
<div>100px 150px; 6</div>
</div>
<h4>Hàng 1 100px, Hàng 2 110px, Hàng 3 120px</h4>
<div class="divcha" style="grid-template-rows: 100px 110px 120px;">
<div>100px 110px 120px; 1</div>
<div>100px 110px 120px; 2</div>
<div>100px 110px 120px; 3</div>
<div>100px 110px 120px; 4</div>
<div>100px 110px 120px; 5</div>
<div>100px 110px 120px; 6</div>
</div>
</body>
</html>
Thuộc tính grid-template-rows phần trăm trong CSS
Quy định chiều cao của từng hàng bằng đơn vị %, tổng % của các hàng là 100%, vị trí thứ 1 là hàng thứ 1, vị trí thừ 2 là hàng thứ 2, cứ thế tăng lên dần:
grid-template-rows: 20% 20% 20%;
Hàng 1 20%, Hàng 2 20%, Hàng 3 20%, tổng 60%, còn trống ở dưới 40%
grid-template-rows: 20% 20%;
Hàng 1 20%, Hàng 2 20%, tổng 40%, còn trống cho hàng 3 chưa tới 60% vì tính khoảng trống giữa các hàng
grid-template-rows: 20% 20% 60%;
Hàng 1 20%, Hàng 2 20%, hàng 3 60%, vì tính cả khoảng trống giữa các hàng nên hàng thứ 3 bị tràn ra
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-rows phần trăm trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px; grid-template-columns: auto auto;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-rows phần trăm trong CSS</h1>
<p>Quy định chiều cao của từng hàng bằng đơn vị %, tổng % của các hàng là 100%, vị trí thứ 1 là hàng thứ 1, vị trí thừ 2 là hàng thứ 2, cứ thế tăng lên dần:</p>
<h4>Hàng 1 20%, Hàng 2 20%, Hàng 3 20%, tổng 60%, còn trống ở dưới 40%</h4>
<div class="divcha" style="grid-template-rows: 20% 20% 20%;">
<div>20% 20% 20%; 1</div>
<div>20% 20% 20%; 2</div>
<div>20% 20% 20%; 3</div>
<div>20% 20% 20%; 4</div>
<div>20% 20% 20%; 5</div>
<div>20% 20% 20%; 6</div>
</div>
<h4>Hàng 1 20%, Hàng 2 20%, tổng 40%, còn trống cho hàng 3 chưa tới 60% vì tính khoảng trống giữa các hàng</h4>
<div class="divcha" style="grid-template-rows: 20% 20%;">
<div>20% 20%; 1</div>
<div>20% 20%; 2</div>
<div>20% 20%; 3</div>
<div>20% 20%; 4</div>
<div>20% 20%; 5</div>
<div>20% 20%; 6</div>
</div>
<h4>Hàng 1 20%, Hàng 2 20%, hàng 3 60%, vì tính cả khoảng trống giữa các hàng nên hàng thứ 3 bị tràn ra.</h4>
<div class="divcha" style="grid-template-rows: 20% 20% 60%;">
<div>20% 20% 60%; 1</div>
<div>20% 20% 60%; 2</div>
<div>20% 20% 60%; 3</div>
<div>20% 20% 60%; 4</div>
<div>20% 20% 60%; 5</div>
<div>20% 20% 60%; 6</div>
</div>
</body>
</html>
Giá trị repeat của thuộc tính grid-template-rows trong CSS
Bên trái dấu phẩy là số lần lặp các hàng được quy định ở bên phải dấu phẩy, bên phải dấu phẩy là số hàng được quy định chiều cao, số hàng được quy định từ 1 trở lên, bạn có thể quy định nhiều hàng để lặp lại:
grid-template-rows: repeat(3, 150px); Lặp 3 lần cho hàng 1 có chiều cao 150px
grid-template-rows: repeat(2, 100px 150px);
Lặp 2 lần cho 2 hàng, hàng 1 có chiều cao 100px, hàng 2 có chiều cao 150px
grid-template-rows: repeat(3, 100px 150px);
Lặp 3 lần cho 2 hàng, hàng 1 có chiều cao 100px, hàng 2 có chiều cao 150px, vì có 4 hàng nên bị trống 2 hàng
<!DOCTYPE html>
<html>
<head>
<title>Giá trị repeat của thuộc tính grid-template-rows trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px; grid-template-columns: auto auto;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Giá trị repeat của thuộc tính grid-template-rows trong CSS</h1>
<p>Bên trái dấu phẩy là số lần lặp các hàng được quy định ở bên phải dấu phẩy, bên phải dấu phẩy là số hàng được quy định chiều cao, số hàng được quy định từ 1 trở lên, bạn có thể quy định nhiều hàng để lặp lại:</p>
<h4>Lặp 3 lần cho hàng 1 có chiều cao 150px</h4>
<div class="divcha" style="grid-template-rows: repeat(3, 150px);">
<div>repeat(3, 150px); 1</div>
<div>repeat(3, 150px); 2</div>
<div>repeat(3, 150px); 3</div>
<div>repeat(3, 150px); 4</div>
<div>repeat(3, 150px); 5</div>
<div>repeat(3, 150px); 6</div>
</div>
<h4>Lặp 2 lần cho 2 hàng, hàng 1 có chiều cao 100px, hàng 2 có chiều cao 150px</h4>
<div class="divcha" style="grid-template-rows: repeat(2, 100px 150px);">
<div>repeat(2, 100px 150px); 1</div>
<div>repeat(2, 100px 150px); 2</div>
<div>repeat(2, 100px 150px); 3</div>
<div>repeat(2, 100px 150px); 4</div>
<div>repeat(2, 100px 150px); 5</div>
<div>repeat(2, 100px 150px); 6</div>
<div>repeat(2, 100px 150px); 7</div>
<div>repeat(2, 100px 150px); 8</div>
</div>
<h4>Lặp 3 lần cho 2 hàng, hàng 1 có chiều cao 100px, hàng 2 có chiều cao 150px, vì có 4 hàng nên bị trống 2 hàng</h4>
<div class="divcha" style="grid-template-rows: repeat(3, 100px 150px);">
<div>repeat(3, 100px 150px); 1</div>
<div>repeat(3, 100px 150px); 2</div>
<div>repeat(3, 100px 150px); 3</div>
<div>repeat(3, 100px 150px); 4</div>
<div>repeat(3, 100px 150px); 5</div>
<div>repeat(3, 100px 150px); 6</div>
<div>repeat(3, 100px 150px); 7</div>
<div>repeat(3, 100px 150px); 8</div>
</div>
</body>
</html>
Cách sử dụng grid-template-rows linh hoạt trong CSS
Khi bố cục cần thích ứng với lượng nội dung hoặc kích thước vùng hiển thị, grid-template-rows có thể kết hợp với các đơn vị và hàm CSS linh hoạt thay vì cố định chiều cao từng hàng. Cách này giúp bố cục Grid dễ mở rộng và hạn chế tình trạng khoảng trống hoặc nội dung bị chèn ép.
Sử dụng đơn vị fr để chia đều chiều cao các hàng
Đơn vị fr biểu thị một phần không gian còn lại của Grid. Khi sử dụng 1fr cho nhiều hàng, phần không gian khả dụng sẽ được phân bổ theo tỷ lệ giữa các hàng thay vì đặt chiều cao bằng một giá trị cố định.
.grid {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
Trong trường hợp ba hàng cùng sử dụng 1fr, không gian còn lại sẽ được chia theo tỷ lệ bằng nhau. Nếu muốn một hàng lớn hơn hàng khác, có thể thay đổi tỷ lệ, chẳng hạn 2fr 1fr 1fr.
Kết hợp minmax() để giới hạn chiều cao hàng
minmax() cho phép thiết lập giới hạn tối thiểu và tối đa cho một hàng. Đây là lựa chọn hữu ích khi muốn hàng có khả năng giãn theo không gian nhưng vẫn duy trì kích thước hợp lý.
.grid {
display: grid;
grid-template-rows: minmax(100px, 1fr) 1fr;
}
Với thiết lập này, hàng đầu tiên có thể mở rộng theo không gian còn lại nhưng không nhỏ hơn 100px. Nhờ đó, nội dung trong hàng vẫn có khoảng hiển thị phù hợp khi kích thước Grid thay đổi.
Kết hợp grid-template-rows với auto và fr
Có thể phối hợp auto và fr để mỗi hàng đảm nhận một vai trò khác nhau. Hàng dùng auto ưu tiên kích thước cần thiết cho nội dung, trong khi fr nhận phần không gian còn lại.
.grid {
display: grid;
grid-template-rows: auto 1fr auto;
}
Cấu trúc này phù hợp với nhiều bố cục thực tế: hàng đầu có thể chứa tiêu đề, hàng giữa mở rộng để tận dụng phần diện tích còn lại và hàng cuối dành cho khu vực kết thúc nội dung. Cách phân bổ này giúp bố cục ổn định hơn mà không cần tự tính chiều cao bằng pixel.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-template-rows trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
