Thuộc tính grid-template-rows phần trăm trong CSS

Thuộc tính grid-template-rows phần trăm trong CSS

Thuộc tính grid-template-rows phần trăm trong CSS

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