Thuộc tính grid-auto-rows trong CSS
Bùi Tấn Lực - 176
- 15/10/2025
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:
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.
Cú pháp của Thuộc tính grid-auto-rows trong CSS
grid-auto-rows: giatri;
giatri: Giá trị 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 (Ví dụ: auto, 50px, 5%, max-content, min-content,...)
Các giá trị của Thuộc tính grid-auto-rows trong CSS
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ữ.
px: Chiều cao của tất cả các hàng được cài đặt theo số px, chữ bị tràn ra ngoài nếu nhiều chữ.
%: Chiều cao của tất cả các hàng được cài đặt theo số %, chữ bị tràn ra ngoài nếu nhiều chữ.
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ữ.
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ữ.
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 chạy theo nội dung, chữ không bị tràn ra ngoài nếu nhiều chữ
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ữ
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ữ
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ữ
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ữ
<!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>
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.
- 0 Bình luận
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 *
