Thuộc tính grid-template-columns trong CSS
Bùi Tấn Lực - 839
- 14/10/2025
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:
grid-template-columns: auto auto auto; 3 Cột
grid-template-columns: auto auto; 2 Cột
grid-template-columns: auto; 1 Cột
<!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:
grid-template-columns: 50px 100px; Cột 1 50px, Cột 2 100px
grid-template-columns: 50px 100px auto; Cột 1 50px, Cột 2 100px, Cột 3 auto
grid-template-columns: 100px auto auto; Cột 1 100px, Cột 2 auto, Cột 3 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 %:
grid-template-columns: 20% 30%; Cột 1 20%, Cột 2 30%
grid-template-columns: 20% 30% auto; Cột 1 20%, Cột 2 30%, Cột 3 auto
grid-template-columns: 20% auto auto; Cột 1 20%, Cột 2 auto, Cột 3 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:
grid-template-columns: max-content max-content; Cột 1 max-content, Cột 2 max-content
grid-template-columns: max-content max-content auto; Cột 1 max-content, Cột 2 max-content, Cột 3 auto
grid-template-columns: max-content auto auto; Cột 1 max-content, Cột 2 auto, Cột 3 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:
grid-template-columns: fit-content(150px) fit-content(100px);
Cột 1 fit-content 150px, Cột 2 fit-content 100px
grid-template-columns: fit-content(150px) fit-content(100px) auto;
Cột 1 fit-content 150px, Cột 2 fit-content 100px, Cột 3 auto
grid-template-columns: fit-content(90%) auto auto; Cột 1 fit-content 90%, Cột 2 auto, Cột 3 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:
grid-template-columns: repeat(2, 60px 100px); Lặp 2 lần của 2 cột trên 1 hàng
grid-template-columns: repeat(3, 60px 100px); Lặp 3 lần của 2 cột trên 1 hàng
grid-template-columns: repeat(2, 60px 70px 80px ); Lặp 2 lần của 3 cột trên 1 hàng
<!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>
Ứng dụng grid-template-columns để tạo bố cục website thực tế
Trong các giao diện sử dụng CSS Grid, grid-template-columns không chỉ dùng để khai báo số lượng cột mà còn giúp kiểm soát cách nội dung phân chia không gian trên màn hình. Khi kết hợp với các hàm và giá trị phù hợp, thuộc tính này có thể tạo ra bố cục linh hoạt mà không cần phụ thuộc quá nhiều vào kích thước cố định.
Kết hợp grid-template-columns với minmax() để bố cục linh hoạt
Hàm minmax() cho phép đặt giới hạn nhỏ nhất và lớn nhất cho mỗi cột. Đây là cách hữu ích khi muốn các cột tự giãn theo không gian còn trống nhưng vẫn duy trì kích thước đủ để nội dung hiển thị rõ ràng.
Chẳng hạn, với một khu vực gồm nhiều khối nội dung, có thể thiết lập mỗi cột không nhỏ hơn 220px và được phép mở rộng theo không gian còn lại:
.products {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 20px;
}
Cách khai báo này giúp các cột chia đều diện tích khả dụng thay vì phải xác định chính xác chiều rộng cho từng cột. Tuy nhiên, nếu màn hình quá hẹp khiến tổng chiều rộng tối thiểu của các cột không còn đủ chỗ, cần kết hợp thêm quy tắc responsive để tránh làm tràn bố cục.
Tạo bố cục responsive bằng grid-template-columns và auto-fit
Khi số lượng nội dung thay đổi, việc cố định số cột cho từng kích thước màn hình sẽ khiến CSS dài và khó bảo trì. auto-fit có thể kết hợp với minmax() để trình duyệt tự điều chỉnh số cột dựa trên chiều rộng thực tế của vùng chứa.
.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
Với cách này, các phần tử sẽ tự xếp thành số cột phù hợp. Khi không đủ không gian cho một cột mới, các phần tử sẽ chuyển xuống hàng tiếp theo thay vì cố giữ một số cột cố định. Đây là lựa chọn phù hợp cho danh sách sản phẩm, bài viết, hình ảnh hoặc các khối nội dung 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-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 *
