1.1 Nguyên lý cơ bản của Grid Layout
CSS Grid Layout là công cụ mạnh mẽ để tạo các bố cục phức tạp và thích ứng. Nó cung cấp cho lập trình viên một hệ thống lưới hai chiều để đặt các phần tử, giúp đơn giản hóa việc tạo bố cục từ đơn giản đến phức tạp. Hãy xem xét các khái niệm cơ bản và cú pháp của CSS Grid mà không đi sâu vào các thuộc tính cụ thể.
Các khái niệm cơ bản của CSS Grid
-
Grid-container và Grid-element:
-
Grid-container là phần tử bao gồm
display: grid. Phần tử này trở thành container của lưới, và tất cả các phần tử con trực tiếp của nó trở thành các Grid-element - Grid-element là các phần tử con trực tiếp của Grid-container, được đặt trong lưới
-
Grid-container là phần tử bao gồm
-
Các trục của lưới:
- Trục chính (inline axis) và trục khối (block axis): Grid hỗ trợ hai trục để đặt các phần tử - trục chính và trục khối. Mặc định, trục chính là ngang, và trục khối là dọc
-
Ô lưới (Grid Cells):
- Ô lưới là các khối cơ bản hình thành tại giao điểm của các hàng và cột. Mỗi Grid-element chiếm một hoặc nhiều ô
-
Đường lưới (Grid Lines):
- Đường lưới là các đường ngang và dọc, chia tách các hàng và cột. Chúng được sử dụng để đặt các phần tử tương đối với lưới
-
Khu vực lưới (Grid Areas):
- Khu vực lưới là các khu vực được đặt tên của lưới, tạo thành từ việc kết hợp nhiều ô. Chúng cho phép nhóm các ô và đặt các phần tử trong các khu vực xác định
1.2 Các phần tử cú pháp
Các phần tử cú pháp cơ bản của CSS Grid
1. Tạo Grid-container:
.container {
display: grid; /* hoặc display: inline-grid */
}
2. Định nghĩa cấu trúc lưới:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Định nghĩa ba cột có chiều rộng khác nhau */
grid-template-rows: 50px 100px; /* Định nghĩa hai hàng có chiều cao khác nhau */
}
3. Kết hợp ô bằng grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* Phần tử chiếm hàng thứ nhất và ba cột đầu tiên */
}
4. Tự động đặt các phần tử:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Đặt chiều cao tối thiểu của các hàng */
}
1.3 Ví dụ
Bố cục đơn giản với CSS Grid:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Giải thích:
- Container .container đặt ba cột, cột thứ nhất và thứ ba chiếm phần không gian bằng nhau, cột thứ hai gấp đôi
- Hai hàng có chiều cao cố định được đặt
- Thuộc tính gap đặt khoảng cách giữa các ô lưới
GO TO FULL VERSION