Thuộc tính grid-template trong CSS
Bùi Tấn Lực - 820
- 15/10/2025
Chức năng của Thuộc tính grid-template trong CSS
Thuộc tính grid-template trong CSS dùng để chỉ định kích thước cho hàng và cột hoặc chỉ định bố cục vị trí cho các phần tử HTML.
Code Thuộc tính grid-template trong CSS
Thuộc tính grid-template chỉ định kích thước trong CSS
grid-template: grid-template-rows / grid-template-columns
grid-template-rows: dùng để quy định chiều cao của từng hàng theo đơn vị px, %, auto và có thể lặp lại những hàng đã quy định chiều cao cho các hàng phía sau, thuộc tính này kết hợp với giá trị grid của thuộc tính display.
grid-template-columns: 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.
grid-template: 150px / auto auto auto;
Hàng 1 chiều cao 150px, Chiều rộng 3 cột là auto
grid-template: 150px 140px / auto auto auto;
Hàng 1 chiều cao 150px, Hàng 2 chiều cao 140px, Chiều rộng 3 cột là auto
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template chỉ định kích thước 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 chỉ định kích thước trong CSS</h1>
<p>grid-template: grid-template-rows / grid-template-columns</p>
<h4>Hàng 1 chiều cao 150px, Chiều rộng 3 cột là auto</h4>
<div class="divcha" style="grid-template: 150px / auto auto auto;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>Hàng 1 chiều cao auto, Chiều rộng 3 cột là auto</h4>
<div class="divcha" style="grid-template: auto / auto auto auto;">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>Hàng 1 chiều cao 150px, Hàng 2 chiều cao 140px, Chiều rộng 3 cột là auto</h4>
<div class="divcha" style="grid-template: 150px 140px / auto auto auto;">
<div>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 chỉ định bố cục trong CSS
Quy định phần tử được chỉ định chiếm bao nhiêu ô của từng hàng và sau phần tử được chỉ định có bao nhiêu cột hoặc trước phần tử được chỉ định có bao nhiêu cột:
grid-template: 'myArea myArea myArea . .';
Phần tử được quy định sẽ chiếm 3 ô đầu tiên, các phần tử còn lại chạy bình thường, 2 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 2 cột (mỗi dấu chấm cách nhau khoảng trống)
grid-template: '. . .'
'. myArea myArea';
Phần tử được quy định sẽ chiếm 2 (2,3) của hàng thứ 2, các phần tử còn lại chạy bình thường
Bạn có thể tham khảo thêm bài viết grid-template-areas
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template chỉ định bố cục 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: 25px;}
</style>
</head>
<body>
<h1>Thuộc tính grid-template chỉ định bố cục trong CSS</h1>
<p>Quy định phần tử được chỉ định chiếm bao nhiêu ô của từng hàng và sau phần tử được chỉ định có bao nhiêu cột hoặc trước phần tử được chỉ định có bao nhiêu cột:</p>
<h4>grid-template: 'myArea myArea myArea . .'; Phần tử được quy định sẽ chiếm 3 ô đầu tiên, các phần tử còn lại chạy bình thường, 2 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 2 cột (mỗi dấu chấm cách nhau khoảng trống)</h4>
<div class="divcha" style="grid-template: 'myArea myArea myArea . .';">
<div style="grid-area: myArea;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-template: 'myArea myArea myArea . . .'; Phần tử được quy định sẽ chiếm 3 ô đầu tiên, các phần tử còn lại chạy bình thường, 3 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 3 cột (mỗi dấu chấm cách nhau khoảng trống)</h4>
<div class="divcha" style="grid-template: 'myArea myArea myArea . . .';">
<div style="grid-area: myArea;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-template: 'myArea myArea myArea . . .' 'myArea myArea myArea . . .'; Phần tử được quy định sẽ chiếm 3 ô đầu tiên của hàng 1 và 3 ô đầu tiên của hàng 2, các phần tử còn lại chạy bình thường, 3 dấu chấm tức là sau phần tử được chỉ định sẽ có thêm 3 cột (mỗi dấu chấm cách nhau khoảng trống)</h4>
<div class="divcha" style="grid-template: 'myArea myArea myArea . . .' 'myArea myArea myArea . . .';">
<div style="grid-area: myArea;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<h4>grid-template: '. . .' '. myArea myArea'; Phần tử được quy định sẽ chiếm 2 (2,3) của hàng thứ 2, các phần tử còn lại chạy bình thường</h4>
<div class="divcha" style="grid-template: '. . .' '. myArea myArea';">
<div style="grid-area: myArea;">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Ứng dụng thuộc tính grid-template trong CSS vào bố cục thực tế
Thuộc tính grid-template phát huy hiệu quả khi cần mô tả nhanh cấu trúc của một vùng bố cục thay vì thiết lập từng thành phần Grid riêng biệt. Việc xác định rõ hàng, cột và khu vực ngay từ đầu giúp bố cục dễ hình dung, thuận tiện điều chỉnh và phù hợp với những giao diện có cấu trúc tương đối rõ ràng.
Tạo bố cục website bằng grid-template
Với một giao diện gồm khu vực đầu trang, nội dung chính, thanh bên và chân trang, grid-template có thể dùng để mô tả cấu trúc tổng thể ngay trên phần tử cha. Cách này đặc biệt hữu ích khi các khu vực cần giữ vị trí ổn định trên màn hình lớn.
.layout {
display: grid;
grid-template:
"header header" 70px
"main sidebar" 1fr
"footer footer" 60px
/ 1fr 280px;
}
Trong ví dụ trên, hai cột được chia thành vùng nội dung chính và thanh bên. Các hàng lần lượt dành cho đầu trang, nội dung và chân trang. Nhờ vậy, cấu trúc giao diện có thể được đọc trực tiếp từ khai báo CSS thay vì phải theo dõi nhiều thuộc tính riêng lẻ.
Kết hợp kích thước hàng và cột để chia bố cục
Không chỉ xác định vị trí, grid-template còn cho phép thiết lập kích thước của hàng và cột trong cùng một khai báo. Có thể kết hợp đơn vị cố định với fr, auto hoặc các hàm kích thước phù hợp để tạo bố cục cân đối hơn.
.content {
display: grid;
grid-template:
"title title" auto
"article aside" 1fr
/ minmax(0, 1fr) 260px;
}
Cách chia này giúp phần nội dung chính tận dụng khoảng trống còn lại, trong khi khu vực phụ giữ được chiều rộng tương đối ổn định. Khi nội dung thay đổi, Grid vẫn có thể phân bổ không gian theo quy tắc đã thiết lập thay vì phụ thuộc vào kích thước cố định của toàn bộ bố cục.
Sử dụng grid-template để tạo khu vực nội dung linh hoạt
Đối với những giao diện có nhiều vùng nội dung, việc kết hợp tên khu vực với kích thước tương ứng giúp thay đổi bố cục dễ dàng hơn. Chẳng hạn, thanh bên có thể xuất hiện cạnh nội dung chính trên màn hình rộng nhưng được chuyển xuống dưới ở màn hình nhỏ bằng cách thay đổi cấu trúc Grid trong media query.
.page {
display: grid;
grid-template:
"main side" 1fr
/ minmax(0, 1fr) 300px;
}
@media (max-width: 768px) {
.page {
grid-template:
"main" auto
"side" auto
/ 1fr;
}
}
Điểm đáng chú ý là không cần thay đổi HTML chỉ để phục vụ từng kích thước màn hình. CSS có thể định nghĩa lại cách các khu vực được sắp xếp, giúp phần giao diện giữ được cấu trúc rõ ràng và dễ bảo trì.
Khi nào nên dùng grid-template thay cho các thuộc tính Grid riêng lẻ
Nên ưu tiên grid-template khi cần mô tả cấu trúc hàng, cột và khu vực trong một bố cục có mối quan hệ rõ ràng. Việc gom các thiết lập liên quan vào một khai báo giúp CSS ngắn gọn và thuận tiện khi đọc lại.
Ngược lại, nếu chỉ cần điều chỉnh riêng số cột, chiều cao hàng hoặc một thành phần cụ thể, sử dụng các thuộc tính như grid-template-columns và grid-template-rows thường dễ kiểm soát hơn. Vì vậy, lựa chọn thuộc tính không nằm ở việc khai báo nào ngắn hơn mà phụ thuộc vào mức độ phức tạp và cách tổ chức của bố cục.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-template 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 *
