Thuộc tính grid-auto-columns trong CSS
Bùi Tấn Lực - 1083
- 15/10/2025
Chức năng của Thuộc tính grid-auto-columns trong CSS
Thuộc tính grid-auto-columns trong CSS dùng để cài đặt chiều rộng của các cột, thuộc tính này kết hợp với giá trị grid của thuộc tính display và kết hợp với thuộc tính grid-template-areas để tạo số cột.
Cú pháp của Thuộc tính grid-auto-columns trong CSS
grid-auto-columns: giatri;
giatri: Giá trị dùng để cài đặt chiều rộng của các cột (Ví dụ: 100px, 5%, auto, max-content, min-content,.... )
Các giá trị của Thuộc tính grid-auto-columns trong CSS
px: Chiều rộng của tất cả các cột được cài đặt bằng số px.
%: Chiều rộng của tất cả các cột được cài đặt bằng số %.
auto: Chiều rộng của tất cả các cột được cài đặt tự động để tổng cột full 100%.
max-content: Chiều rộng của tất cả các cột được cài đặt max-content, mỗi cột lấy chiều rộng của ô có nội dung dài nhất.
min-content: Chiều rộng của tất cả các cột được cài đặt min-content, mỗi cột lấy chiều rộng của ô có một từ dài nhất.
Code Thuộc tính grid-auto-columns trong CSS
grid-auto-columns: 50px; Chiều rộng của tất cả các cột được cài đặt 50px
grid-auto-columns: auto; Chiều rộng của tất cả các cột được cài đặt tự động để tổng cột full 100%
grid-auto-columns: 30%; Chiều rộng của tất cả các cột được cài đặt 30%
grid-auto-columns: max-content;
Chiều rộng của tất cả các cột được cài đặt max-content, mỗi cột lấy chiều rộng của ô có nội dung dài nhất
grid-auto-columns: min-content;
Chiều rộng của tất cả các cột được cài đặt min-content, mỗi cột lấy chiều rộng của ô có một từ dài nhất
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính grid-auto-columns 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-areas: '. . .'; }
.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-columns trong CSS</h1>
<p>Dùng để cài đặt chiều rộng của các cột:</p>
<h4>grid-auto-columns: 50px; Chiều rộng của tất cả các cột được cài đặt 50px</h4>
<div class="divcha" style="grid-auto-columns: 50px;">
<div>1 Xin Chào</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-auto-columns: 150px; Chiều rộng của tất cả các cột được cài đặt 150px</h4>
<div class="divcha" style="grid-auto-columns: 150px;">
<div>1 Xin Chào</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-auto-columns: auto; Chiều rộng của tất cả các cột được cài đặt tự động để tổng cột full 100%</h4>
<div class="divcha" style="grid-auto-columns: auto;">
<div>1 Xin Chào</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-auto-columns: 30%; Chiều rộng của tất cả các cột được cài đặt 30%</h4>
<div class="divcha" style="grid-auto-columns: 30%;">
<div>1 Xin Chào</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-auto-columns: max-content; Chiều rộng của tất cả các cột được cài đặt max-content, mỗi cột lấy chiều rộng của ô có nội dung dài nhất</h4>
<div class="divcha" style="grid-auto-columns: max-content;">
<div>1 Xin Chào</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-auto-columns: min-content; Chiều rộng của tất cả các cột được cài đặt min-content, mỗi cột lấy chiều rộng của ô có một từ dài nhất</h4>
<div class="divcha" style="grid-auto-columns: min-content;">
<div>1 Xin Chào </div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Cách kết hợp grid-auto-columns với các thuộc tính CSS Grid
grid-auto-columns phát huy hiệu quả rõ rệt khi được sử dụng cùng các thuộc tính khác của CSS Grid. Thay vì chỉ kiểm soát kích thước cột phát sinh, bạn có thể phối hợp nó với grid-auto-flow, grid-template-columns và gap để xây dựng bố cục linh hoạt hơn.
Kết hợp grid-auto-columns với grid-auto-flow
grid-auto-flow quyết định cách các phần tử chưa được chỉ định vị trí được tự động sắp xếp vào Grid. Khi đặt giá trị column, các phần tử mới sẽ được phân bổ theo chiều cột và grid-auto-columns có thể xác định kích thước cho những cột ngầm được tạo ra.
.grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 180px;
gap: 16px;
}
Cách kết hợp này phù hợp với các danh sách cần chạy theo chiều ngang, chẳng hạn danh mục, thẻ nội dung hoặc các nhóm mục có số lượng phần tử thay đổi. Mỗi cột phát sinh sẽ có kích thước đồng nhất mà không cần khai báo trước số lượng cột.
Kết hợp grid-auto-columns với grid-template-columns
grid-template-columns kiểm soát các cột được khai báo rõ ràng, trong khi grid-auto-columns xử lý kích thước của cột ngầm phát sinh ngoài cấu trúc đó. Hai thuộc tính có thể được dùng cùng nhau khi bố cục có phần cố định nhưng vẫn cần khả năng mở rộng.
.grid {
display: grid;
grid-template-columns: 220px 1fr;
grid-auto-columns: 180px;
gap: 20px;
}
Trong trường hợp này, hai cột đầu tiên tuân theo grid-template-columns. Nếu quá trình sắp xếp tạo thêm cột ngầm, kích thước của chúng sẽ được xác định bởi grid-auto-columns. Đây là cách hữu ích để giữ phần khung chính ổn định nhưng vẫn cho phép Grid mở rộng khi cần.
Kết hợp grid-auto-columns với gap để kiểm soát khoảng cách
grid-auto-columns xác định chiều rộng của cột, còn gap tạo khoảng cách giữa các hàng và cột. Kết hợp hai thuộc tính giúp kiểm soát đồng thời kích thước từng cột và khoảng trống giữa các phần tử.
.grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(160px, 220px);
gap: 24px;
}
Với cách thiết lập này, mỗi cột tự động có thể co giãn trong khoảng từ 160px đến 220px, đồng thời duy trì khoảng cách 24px giữa các cột. Cách làm này giúp bố cục thoáng và dễ điều chỉnh hơn so với việc cố định toàn bộ kích thước bằng từng giá trị riêng lẻ.
Kết hợp grid-auto-columns trong bố cục Grid responsive
Trong bố cục responsive, số lượng nội dung có thể thay đổi theo từng màn hình. Sử dụng grid-auto-columns với các giá trị linh hoạt như minmax() giúp các cột ngầm thích ứng tốt hơn mà không phải khai báo lại cấu trúc Grid quá nhiều.
.grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(180px, 1fr);
gap: 16px;
}
Cách thiết lập này đặc biệt hữu ích khi cần tạo một dãy nội dung có thể mở rộng theo chiều ngang. Khi kết hợp thêm overflow hoặc điều chỉnh cấu trúc bằng media query, bạn có thể xây dựng các khu vực responsive như danh sách sản phẩm, chuyên mục hoặc thẻ nội dung mà vẫn giữ được kích thước tương đối đồng đều.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-auto-columns 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 *
