Các vùng được đặt tên
Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 33 trên 43.
Thay vì đặt các mục bằng số dòng, bạn có thể đặt tên cho các phần trong lưới bằng thuộc tính grid-template-areas. Cách này rất hữu ích để tạo bố cục gọn gàng, dễ đọc, đặc biệt khi làm việc với nhiều phần như đầu trang, thanh bên và chân trang. Hãy xem ví dụ bên dưới:
Chúng ta định nghĩa một vùng chứa bằng CSS Grid và dùng grid-template-areas để tạo bố cục có tên:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}Mỗi dòng văn bản tạo thành một hàng, và mỗi từ trong dòng là một phần của lưới. Nếu bạn lặp lại một từ, vùng đó sẽ trải rộng hơn.
Sau đó, bạn ghép các phần tử HTML với những tên đó như sau:
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
Thử thách
DễTạo bố cục CSS grid cho một trang web cơ bản với các vùng như trong hình bên dưới:
Đặt các thuộc tính sau cho bộ chọn .container:
- Đặt
displaythànhgrid - Đặt
grid-template-columnsthành1fr 3fr - Đặt
grid-template-rowsthànhauto 1fr auto Đặt
grid-template-areasthành:"header header""profile main""footer footer"
Gán từng phần tử vào vùng tương ứng. Ví dụ, với .header, đặt grid-area thành header.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100vh;
gap: 10px;
/* Set up your grid container here */
}
.header {
/* Assign to header area */
background-color: #f1c40f;
padding: 20px;
}
.profile {
/* Assign to profile area */
background-color: #3498db;
padding: 20px;
}
.main {
/* Assign to main area */
background-color: #2ecc71;
padding: 20px;
}
.footer {
/* Assign to footer area */
background-color: #e74c3c;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="profile">Profile</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Thành thạo CSS
1Làm chủ bộ chọn: Kết hợp
Giới thiệuBộ chọn hậu duệBộ chọn conBộ chọn anh em liền kềBộ chọn anh em tổng quátThử thách ôn tập7Xây dựng giao diện với CSS Grid
Cơ bản về GridĐịnh vị phần tử theo hàng của GridCác vùng được đặt tênThử thách ôn tậpTự luyện tập: Playground Web