Code Thuộc tính grid-auto-rows trong CSS

Code Thuộc tính grid-auto-rows trong CSS

Code Thuộc tính grid-auto-rows trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-auto-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 auto auto;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 15px;}
</style>
</head>
<body>

<h1>Code Thuộc tính grid-auto-rows trong CSS</h1>
<p>Dùng để cài đặt chiều cao cho tất cả các hàng, có thể cố định chiều cao hoặc tự động theo nội dung trong các hàng:</p>

<h4>grid-auto-rows: auto; Chiều cao của tất cả các hàng chạy theo nội dung, chữ không bị tràn ra ngoài nếu nhiều chữ</h4>
<div class="divcha" style="grid-auto-rows: auto;">
    <div>1 <br><br> Xin Chào</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>grid-auto-rows: 50px; Chiều cao của tất cả các hàng được cài đặt 50px, chữ bị tràn ra ngoài nếu nhiều chữ</h4>
<div class="divcha" style="grid-auto-rows: 50px;">
    <div>1 <br><br> Xin Chào</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>grid-auto-rows: max-content; Chiều cao của tất cả các hàng chạy theo nội dung, chữ không bị tràn ra ngoài nếu nhiều chữ</h4>
<div class="divcha" style="grid-auto-rows: max-content;">
    <div>1 <br><br> Xin Chào</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>


<h4>grid-auto-rows: min-content; Chiều cao của tất cả các hàng chạy theo nội dung, chữ không bị tràn ra ngoài nếu nhiều chữ </h4>
<div class="divcha" style="grid-auto-rows: min-content;">
    <div>1 <br><br> Xin Chào</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

<h4>grid-auto-rows: 30%; Chiều cao của tất cả các hàng được cài đặt 30%, chữ bị tràn ra ngoài nếu nhiều chữ</h4>
<div class="divcha" style="grid-auto-rows: 30%;">
    <div>1 <br><br> Xin Chào</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

</body>
</html>
Code Thuộc tính grid-auto-rows trong CSS nằm trong bài viết Thuộc tính grid-auto-rows trong CSS