Bùi Tấn Lực - 198
- 15/10/2025
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, 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-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>
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 *
