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

Trình soạn thảo - Code Thuộc tính grid-auto-columns trong CSS

Kết quả - Code Thuộc tính grid-auto-columns trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!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>