Giá trị repeat của thuộc tính grid-template-rows trong CSS
Giá trị repeat của thuộc tính grid-template-rows trong CSS
Giá trị repeat của thuộc tính grid-template-rows trong CSS
Tự code rồi chạy thử...
Chạy Thử
<!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><!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>Giá trị repeat của thuộc tính grid-template-rows trong CSS nằm trong bài viết Thuộc tính grid-template-rows trong CSS
