Thuộc tính grid-template-areas trong CSS
Bùi Tấn Lực - 834
- 15/10/2025
Chức năng của Thuộc tính grid-template-areas trong CSS
Thuộc tính grid-template-areas trong CSS dùng để quy định các ô trên từng hàng và từng cột cho từng phần tử HTML, phần tử cha sẽ sử dụng thuộc tính grid-template-areas để gọi giá trị của thuộc tính grid-area trên từng phần tử con sau đó định dạng theo từng ô.
Code Thuộc tính grid-template-areas trong CSS
Thuộc tính grid-template-areas cho một phần tử trong CSS
grid-template-areas: '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-areas: '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)
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-areas cho một phần tử 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-areas cho một phần tử 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:</p>
<h4>grid-template-areas: '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-areas: '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-areas: '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-areas: '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-areas: '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-areas: '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>
</body>
</html>
Thuộc tính grid-template-areas cho nhiều phần tử trong CSS
grid-template-areas: 'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
Chia 3 hàng, mỗi hàng 6 cột: header chiếm tất cả 6 ô của hàng 1, menu chiếu 1 ô đầu tiên của hàng 2 và 1 ô đầu tiên của hàng 3, main chiếm 3 ô (2,3,4) của hàng 2, right chiềm 2 ô (5,6) của hàng 2, footer chiếm 5 ô (2,3,4,5,6) của hàng 3:
<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-areas cho nhiều phần tử 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-areas cho nhiều phần tử trong CSS</h1>
<p>grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';</p>
<p>Chia 3 hàng, mỗi hàng 6 cột: header chiếm tất cả 6 ô của hàng 1, menu chiếu 1 ô đầu tiên của hàng 2 và 1 ô đầu tiên của hàng 3, main chiếm 3 ô (2,3,4) của hàng 2, right chiềm 2 ô (5,6) của hàng 2, footer chiếm 5 ô (2,3,4,5,6) của hàng 3:</p>
<div class="divcha" style="grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';">
<div style="grid-area: header;">Header</div>
<div style="grid-area: menu;">Menu</div>
<div style="grid-area: main;">Main</div>
<div style="grid-area: right;">Right</div>
<div style="grid-area: footer;">Footer</div>
</div>
</body>
</html>
Ứng dụng grid-template-areas trong thiết kế giao diện website
grid-template-areas phát huy hiệu quả rõ nhất khi giao diện được chia thành nhiều khu vực có vị trí xác định. Thay vì căn chỉnh từng phần tử bằng nhiều thuộc tính, bạn có thể đặt tên cho các vùng và mô tả trực tiếp cách chúng xuất hiện trên lưới.
Cách làm này đặc biệt phù hợp với các bố cục quen thuộc như đầu trang, menu, nội dung chính, thanh bên và chân trang. Khi cấu trúc giao diện thay đổi trên màn hình nhỏ, chỉ cần điều chỉnh lại các vùng là có thể tạo bố cục mới mà không phải thay đổi HTML.
Xây dựng bố cục Header, Menu và Main bằng CSS Grid
Với giao diện cơ bản gồm khu vực đầu trang, menu và nội dung chính, mỗi phần có thể được đặt vào một vùng riêng. Cách đặt tên trực quan giúp nhìn vào CSS là có thể hình dung ngay cấu trúc trang.
.layout {
display: grid;
grid-template-areas:
"header header"
"menu main";
grid-template-columns: 220px 1fr;
}
.header {
grid-area: header;
}
.menu {
grid-area: menu;
}
.main {
grid-area: main;
}
Trong ví dụ này, header chiếm toàn bộ chiều ngang, còn menu và main nằm cạnh nhau ở hàng bên dưới. Giá trị 1fr giúp khu vực nội dung tự nhận phần không gian còn lại.
Tạo bố cục Sidebar và nội dung chính linh hoạt
Khi trang có thêm thanh bên, grid-template-areas giúp xác định rõ mối quan hệ giữa Sidebar và khu vực nội dung. Bạn cũng có thể thay đổi độ rộng cột mà không cần can thiệp vào từng phần tử.
.page {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 1fr 280px;
gap: 24px;
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.sidebar {
grid-area: sidebar;
}
.footer {
grid-area: footer;
}
Cấu trúc trên tạo một khu vực nội dung rộng ở bên trái và Sidebar rộng 280px ở bên phải. Khi cần đổi vị trí, bạn chỉ cần sắp xếp lại tên vùng trong grid-template-areas, thay vì phải thay đổi thứ tự các phần tử HTML.
Thiết kế giao diện Responsive với grid-template-areas
Đây là một trong những điểm mạnh đáng chú ý của thuộc tính này. Trên màn hình lớn, Sidebar có thể nằm cạnh nội dung; khi chuyển sang thiết bị nhỏ, các vùng có thể xếp thành một cột bằng Media Query.
.page {
display: grid;
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 1fr 280px;
}
@media (max-width: 768px) {
.page {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}
Cách tổ chức này giúp CSS responsive dễ theo dõi hơn vì bạn chỉ cần thay đổi sơ đồ vùng. HTML vẫn giữ nguyên, trong khi cách trình bày được điều chỉnh theo kích thước màn hình.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính grid-template-areas 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 *
