Thuộc tính grid-auto-rows trong CSS
Bùi Tấn Lực - 882
- 15/10/2025
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>
Ứng dụng thuộc tính grid-auto-rows trong CSS
Thuộc tính grid-auto-rows phát huy tác dụng khi bố cục Grid xuất hiện thêm các hàng ngoài những hàng đã được khai báo trước. Tùy mục đích thiết kế, bạn có thể để chiều cao hàng thay đổi theo nội dung, đặt kích thước cố định hoặc kết hợp với minmax() để giao diện linh hoạt hơn.
Tạo các hàng Grid có chiều cao tự động theo nội dung
Khi muốn mỗi hàng có thể mở rộng để chứa trọn nội dung, bạn có thể sử dụng giá trị auto. Đây là lựa chọn phù hợp với danh sách sản phẩm, thẻ bài viết hoặc các khối nội dung có độ dài không đồng đều.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
}
Với thiết lập này, các hàng được tạo tự động có thể tăng chiều cao khi nội dung bên trong cần thêm không gian. Cách làm này giúp hạn chế tình trạng nội dung bị ép vào một chiều cao cố định.
Cài đặt chiều cao cố định cho các hàng Grid
Nếu thiết kế yêu cầu các hàng phát sinh phải đồng nhất về kích thước, có thể đặt một giá trị cụ thể cho grid-auto-rows. Chẳng hạn, 120px sẽ tạo các hàng tự động có chiều cao 120px.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 120px;
}
Cách này phù hợp với những bố cục cần sự cân đối giữa các khối. Tuy nhiên, nếu nội dung có thể thay đổi độ dài, nên cân nhắc dùng kích thước linh hoạt để tránh hàng quá thấp so với phần nội dung bên trong.
Kết hợp grid-auto-rows với minmax() để tạo bố cục linh hoạt
Kết hợp grid-auto-rows với minmax() giúp kiểm soát giới hạn chiều cao mà vẫn cho phép hàng mở rộng khi cần. Đây là lựa chọn hữu ích khi muốn giao diện vừa gọn gàng vừa thích ứng với nội dung thực tế.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
}
Trong ví dụ trên, mỗi hàng tự động có chiều cao tối thiểu 100px và có thể tăng thêm theo nội dung. Nhờ đó, các khối vẫn giữ được kích thước cơ bản nhưng không bị giới hạn cứng khi phần nội dung dài hơn dự kiến.
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 *
