Bùi Tấn Lực - 27
- 14/10/2025
Bùi Tấn Lực Thuộc tính grid-template-columns trong CSS dùng để quy định cách hiển thị của các ô trên các cột và cách lặp của các cột, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính grid-template-columns trong CSS
Chức năng của Thuộc tính grid-template-columns trong CSS
Thuộc tính grid-template-columns trong CSS dùng để quy định cách hiển thị của các ô trên các cột và cách lặp của các cột, thuộc tính này sử dụng kèm với giá trị grid của thuộc tính display.
Các giá trị của Thuộc tính grid-template-columns trong CSS
auto: Có bao nhiêu auto thì sẽ chia bấy nhiêu cột, khi có cột chia auto thì cột auto đó sẽ tự động canh chiều rộng để full hàng giữa các cột.
px: Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo px thì kích thước chiều rộng theo px.
%: Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo % thì kích thước chiều rộng theo %.
max-content: Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo max-content thì kích thước chiều rộng cột đó sẽ chia theo ô có chiều rộng câu chữ dài nhất, ô cũng chia theo độ rộng câu chữ, các chữ số trong mỗi ô không có tự động xuống hàng mà trải dài.
fit-content: Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo fit-content thì kích thước chiều rộng sẽ giới hạn max theo giá trị trong đó, nếu nội dung các ô trong cột đó không full bằng giá trị đã cho thì chiều rộng cột sẽ thu nhỏ lại cho vừa đoạn chữ dài nhất.
repeat: Cột bên trái dấu phẩy là số lần lặp số cột có bên phải, bên phải dấu phẩy là số cột cần lặp và mỗi cột có quy định kích thước chiều rộng.
Code Thuộc tính grid-template-columns trong CSS
Thuộc tính grid-template-columns auto trong CSS
Có bao nhiêu auto thì sẽ chia bấy nhiêu cột, khi có cột chia auto thì cột auto đó sẽ tự động canh chiều rộng để full hàng giữa các cột:
3 Cột: grid-template-columns: auto auto auto;
2 Cột: grid-template-columns: auto auto;
1 Cột: grid-template-columns: auto;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-columns auto 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;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 30px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-columns auto trong CSS</h1>
<p>Có bao nhiêu auto thì sẽ chia bấy nhiêu cột:</p>
<div class="divcha" style="grid-template-columns: auto auto auto;">
<div>auto auto auto; 1</div>
<div>auto auto auto; 2</div>
<div>auto auto auto; 3</div>
<div>auto auto auto; 4</div>
<div>auto auto auto; 5</div>
<div>auto auto auto; 6</div>
</div>
<div class="divcha" style="grid-template-columns: auto auto;">
<div>auto auto; 1</div>
<div>auto auto; 2</div>
<div>auto auto; 3</div>
<div>auto auto; 4</div>
<div>auto auto; 5</div>
<div>auto auto; 6</div>
</div>
<div class="divcha" style="grid-template-columns: auto;">
<div>auto; 1</div>
<div>auto; 2</div>
<div>auto; 3</div>
<div>auto; 4</div>
<div>auto; 5</div>
<div>auto; 6</div>
</div>
</body>
</html>
Thuộc tính grid-template-columns px trong CSS
Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo px thì kích thước chiều rộng theo px:
Cột 1 50px, Cột 2 100px: grid-template-columns: 50px 100px;
Cột 1 50px, Cột 2 100px, Cột 3 auto: grid-template-columns: 50px 100px auto;
Cột 1 100px, Cột 2 auto, Cột 3 auto: grid-template-columns: 100px auto auto;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-columns px 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;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-columns px trong CSS</h1>
<p>Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo px thì kích thước chiều rộng theo px:</p>
<div class="divcha" style="grid-template-columns: 50px 100px;">
<div>50px 100px; 1</div>
<div>50px 100px; 2</div>
<div>50px 100px; 3</div>
<div>50px 100px; 4</div>
<div>50px 100px; 5</div>
<div>50px 100px; 6</div>
</div>
<div class="divcha" style="grid-template-columns: 50px 100px auto;">
<div>50px 100px auto; 1</div>
<div>50px 100px auto; 2</div>
<div>50px 100px auto; 3</div>
<div>50px 100px auto; 4</div>
<div>50px 100px auto; 5</div>
<div>50px 100px auto; 6</div>
</div>
<div class="divcha" style="grid-template-columns: 100px auto auto;">
<div>100px auto auto; 1</div>
<div>100px auto auto; 2</div>
<div>100px auto auto; 3</div>
<div>100px auto auto; 4</div>
<div>100px auto auto; 5</div>
<div>100px auto auto; 6</div>
</div>
</body>
</html>
Thuộc tính grid-template-columns phần trăm trong CSS
Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo % thì kích thước chiều rộng theo %:
Cột 1 20%, Cột 2 30%: grid-template-columns: 20% 30%;
Cột 1 20%, Cột 2 30%, Cột 3 auto: grid-template-columns: 20% 30% auto;
Cột 1 20%, Cột 2 auto, Cột 3 auto: grid-template-columns: 20% auto auto;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-columns phần trăm 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;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-columns phần trăm trong CSS</h1>
<p>Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo % thì kích thước chiều rộng theo %:</p>
<div class="divcha" style="grid-template-columns: 20% 30%;">
<div>20% 30%; 1</div>
<div>20% 30%; 2</div>
<div>20% 30%; 3</div>
<div>20% 30%; 4</div>
<div>20% 30%; 5</div>
<div>20% 30%; 6</div>
</div>
<div class="divcha" style="grid-template-columns: 20% 30% auto;">
<div>20% 30% auto; 1</div>
<div>20% 30% auto; 2</div>
<div>20% 30% auto; 3</div>
<div>20% 30% auto; 4</div>
<div>20% 30% auto; 5</div>
<div>20% 30% auto; 6</div>
</div>
<div class="divcha" style="grid-template-columns: 20% auto auto;">
<div>20% auto auto; 1</div>
<div>20% auto auto; 2</div>
<div>20% auto auto; 3</div>
<div>20% auto auto; 4</div>
<div>20% auto auto; 5</div>
<div>20% auto auto; 6</div>
</div>
</body>
</html>
Thuộc tính grid-template-columns max-content trong CSS
Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo max-content thì kích thước chiều rộng cột đó sẽ chia theo ô có chiều rộng câu chữ dài nhất, ô cũng chia theo độ rộng câu chữ, các chữ số trong mỗi ô không có tự động xuống hàng mà trải dài:
Cột 1 max-content, Cột 2 max-content: grid-template-columns: max-content max-content;
Cột 1 max-content, Cột 2 max-content, Cột 3 auto: grid-template-columns: max-content max-content auto;
Cột 1 max-content, Cột 2 auto, Cột 3 auto: grid-template-columns: max-content auto auto;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-columns max-content 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;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-columns max-content trong CSS</h1>
<p>Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo max-content thì kích thước chiều rộng cột đó sẽ chia theo ô có chiều rộng câu chữ dài nhất, ô cũng chia theo độ rộng câu chữ, các chữ số trong mỗi ô không có tự động xuống hàng mà trải dài:</p>
<div class="divcha" style="grid-template-columns: max-content max-content;">
<div>max-content max-content; 1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="divcha" style="grid-template-columns: max-content max-content auto;">
<div>max-content max-content auto; 1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="divcha" style="grid-template-columns: max-content auto auto;">
<div>max-content auto auto; 1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Thuộc tính grid-template-columns fit-content trong CSS
Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo fit-content thì kích thước chiều rộng sẽ giới hạn max theo giá trị trong đó, nếu nội dung các ô trong cột đó không full bằng giá trị đã cho thì chiều rộng cột sẽ thu nhỏ lại cho vừa đoạn chữ dài nhất:
Cột 1 fit-content 150px, Cột 2 fit-content 100px: grid-template-columns: fit-content(150px) fit-content(100px);
Cột 1 fit-content 150px, Cột 2 fit-content 100px: grid-template-columns, Cột 3 auto: grid-template-columns: fit-content(150px) fit-content(100px) auto;
Cột 1 fit-content 90%, Cột 2 auto, Cột 3 auto: grid-template-columns: fit-content(90%) auto auto;
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-columns fit-content 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;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-columns fit-content trong CSS</h1>
<p>Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo fit-content thì kích thước chiều rộng sẽ giới hạn max theo giá trị trong đó, nếu nội dung các ô trong cột đó không full bằng giá trị đã cho thì chiều rộng cột sẽ thu nhỏ lại cho vừa đoạn chữ dài nhất:</p>
<div class="divcha" style="grid-template-columns: fit-content(150px) fit-content(100px);">
<div>fit-content(150px) fit-content(100px); 1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="divcha" style="grid-template-columns: fit-content(150px) fit-content(100px) auto;">
<div>fit-content(150px) fit-content(100px) auto;</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<div class="divcha" style="grid-template-columns: fit-content(90%) auto auto;">
<div>grid-template-columns: fit-content(90%) auto auto;</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Thuộc tính grid-template-columns repeat trong CSS
Cột bên trái dấu phẩy là số lần lặp số cột có bên phải, bên phải dấu phẩy là số cột cần lặp và mỗi cột có quy định kích thước chiều rộng:
Lặp 2 lần của 2 cột trên 1 hàng: grid-template-columns: repeat(2, 60px 100px);
Lặp 3 lần của 2 cột trên 1 hàng: grid-template-columns: repeat(3, 60px 100px);
Lặp 2 lần của 3 cột trên 1 hàng: grid-template-columns: repeat(2, 60px 70px 80px );
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-columns repeat 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;}
.divcha div {background:green; color:#fff; text-align: center;
padding: 20px 0;
font-size: 15px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template-columns repeat trong CSS</h1>
<p>Có bao nhiêu cột được chia thì sẽ chia bấy nhiêu cột, cột nào được chia theo px thì kích thước chiều rộng theo px:</p>
<h4>Lặp 2 lần của 2 cột trên 1 hàng</h4>
<div class="divcha" style="grid-template-columns: repeat(2, 60px 100px);">
<div>repeat(2, 60px 100px);</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>Lặp 3 lần của 2 cột trên 1 hàng</h4>
<div class="divcha" style="grid-template-columns: repeat(3, 60px 100px);">
<div>repeat(3, 60px 100px);</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>Lặp 2 lần của 3 cột trên 1 hàng</h4>
<div class="divcha" style="grid-template-columns: repeat(2, 60px 70px 80px );">
<div>repeat(2, 60px 70px 80px );</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-template-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 *
