Flexbox rất hiệu quả khi bố cục một chiều (ngang hoặc dọc), nhưng khi bạn muốn tạo bố cục hai chiều (ngang và dọc cùng lúc) – ví dụ như bảng lưới, layout trang chủ, giao diện tin tức… thì CSS Grid là công cụ mạnh nhất.
Trong bài này, bạn sẽ học:
- Cách khai báo lưới bằng CSS Grid
- Tạo dòng và cột
- Điều khiển kích thước và vị trí phần tử trong lưới
- Sử dụng các đơn vị đặc biệt như
fr,repeat(),minmax()
1. Kích hoạt CSS Grid
.container {
display: grid;
}
→ Giống Flexbox, bạn kích hoạt Grid bằng display: grid.
2. Tạo cột bằng grid-template-columns
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
}
→ Tạo 3 cột, mỗi cột rộng 200px
Bạn có thể dùng:
px,%fr: đơn vị phân chia tỉ lệ còn lại trong container
grid-template-columns: 1fr 2fr 1fr;
→ Cột giữa sẽ rộng gấp đôi hai cột còn lại.
3. Tạo dòng bằng grid-template-rows
.container {
grid-template-rows: 100px 100px;
}
→ Tạo 2 dòng, mỗi dòng cao 100px
4. Sử dụng repeat() và gap
grid-template-columns: repeat(3, 1fr);
gap: 20px;
repeat(3, 1fr)= lặp lại 3 cột, mỗi cột 1 phầngap: tạo khoảng cách giữa dòng và cột
5. Thực hành: tạo layout 3 cột, 2 dòng
style.css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 150px 150px;
gap: 20px;
padding: 20px;
background: #f1f8e9;
}
.item {
background: #aed581;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: #fff;
font-size: 20px;
border-radius: 6px;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bài 16 – Grid layout cơ bản</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
6. Các đơn vị đặc biệt
| Đơn vị | Ý nghĩa |
|---|---|
fr | Phân chia phần còn lại theo tỉ lệ (1fr, 2fr) |
px, % | Đơn vị tuyệt đối hoặc tương đối |
auto | Căn theo nội dung |
minmax() | Xác định kích thước tối thiểu và tối đa |
Ví dụ:
grid-template-columns: repeat(3, minmax(150px, 1fr));
→ Mỗi cột ít nhất 150px, có thể giãn ra nếu đủ chỗ
7. Ghi nhớ
| Thuộc tính | Mục đích |
|---|---|
display: grid | Kích hoạt Grid layout |
grid-template-columns | Tạo cột |
grid-template-rows | Tạo dòng |
gap | Khoảng cách giữa item |
repeat(), fr | Viết gọn và linh hoạt |
minmax() | Giới hạn kích thước theo điều kiện |
Thảo luận