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

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

Chức năng của Thuộc tính grid-auto-rows trong CSS

Thuộc tính grid-auto-rows trong CSS 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.

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

grid-auto-rows: auto; Chiều cao của tất cả các hàng được cài đặt auto

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ữ

<!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 được cài đặt auto</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 được cài đặt max-content</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 được cài đặt min-content</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%</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>

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