💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Chia 3 cột bằng Grid
📌
Kết luận
Dùng display: grid + grid-template-columns để tạo bố cục dạng lưới
📝 Mã thực tế tại đây
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}Đơn vị fr là gì?
fr viết tắt của "fraction" (phân số), đại diện cho **phần không gian còn lại được chia đều**.
| Cách chỉ định | Ý nghĩa |
|---|---|
1fr 1fr 1fr | Chia làm 3 phần bằng nhau |
2fr 1fr | Chia theo tỷ lệ 2:1 |
200px 1fr | Cột trái cố định 200px, cột phải lấy hết phần còn lại |
Grid vs Flexbox
| Đặc điểm | Flexbox | Grid |
|---|---|---|
| Chiều | 1 chiều | 2 chiều |
| Thế mạnh | Dàn hàng ngang, căn giữa | Danh sách thẻ, Layout trang |
| Điều khiển | Chỉ hàng hoặc cột | Cả hàng và cột cùng lúc |
Tổng kết
-display: grid tạo bố cục dạng lưới
- grid-template-columns xác định số lượng cột
- Đơn vị fr giúp phân chia không gian linh hoạt
- Dùng gap để tạo khoảng cách giữa các ô lưới
Hãy thử trong phần bài tập
Hãy tạo một bố cục 3 cột bằng CSS Grid nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Sử dụng Grid để chia các phần tử con thành 3 cột bằng nhau.
Gợi ý khi gặp khó khăn
display: grid; grid-template-columns: 1fr 1fr 1fr;