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:

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

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.

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>

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