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, chi tiết như nào hãy cùng chúng tôi phân tích:

Thuộc tính grid-template-rows trong CSS

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:

Hàng 1 auto, Hàng 2 auto: grid-template-rows: auto auto;

Hàng 1 auto, Hàng 2 auto, Hàng 3 120px: grid-template-rows: auto auto 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>

Chạy Thử

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:

Hàng 1 100px, Hàng 2 150px: grid-template-rows: 100px 150px;

Hàng 1 100px, Hàng 2 110px, Hàng 3 120px: grid-template-rows: 100px 110px 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>

Chạy Thử

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:

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% 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%;

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: grid-template-rows: 20% 20% 60%;

<!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>

Chạy Thử

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:

Lặp 3 lần cho hàng 1 có chiều cao 150px: grid-template-rows: repeat(3, 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(2, 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: grid-template-rows: repeat(3, 100px 150px);

<!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>

Chạy Thử

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.

5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website

Chia sẻ nội dung đánh giá của bạn về Thuộc tính grid-template-rows trong CSS
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 *

Bình luận, Hỏi đáp

Đăng ký tư vấn miễn phí

Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn