Danh sách bài viết, thư viện ảnh hay bảng sản phẩm đều cần một lưới tự đổi số cột theo màn hình. Với CSS Grid, bạn làm được điều đó chỉ bằng một dòng, không cần viết media query cho từng kích thước.
Lưới responsive trong một dòng
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
gap: 1.5rem;
}repeat(auto-fill, …): tạo nhiều cột nhất có thể vừa với chiều ngang.minmax(16rem, 1fr): mỗi cột rộng tối thiểu 16rem, phần dư được chia đều.gap: khoảng cách giữa các ô, không cần dùng margin.
Màn hình rộng sẽ có 3–4 cột, tablet 2 cột và điện thoại 1 cột, tất cả tự động.
auto-fill khác auto-fit thế nào?
Khác biệt chỉ lộ ra khi có ít phần tử hơn số cột có thể chứa:
- auto-fill giữ lại các cột trống, phần tử không bị kéo giãn.
- auto-fit gộp các cột trống lại, phần tử giãn ra lấp đầy chiều ngang.
Với danh sách thường xuyên thay đổi số lượng, auto-fill cho kích thước ô ổn định hơn; với vài thẻ nổi bật muốn chiếm hết hàng, hãy dùng auto-fit.
Tránh tràn ngang trên màn hình nhỏ
Nếu màn hình hẹp hơn giá trị tối thiểu (16rem), ô sẽ tràn ra ngoài. Bọc giá trị bằng min() để ô không bao giờ rộng hơn khung chứa:
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));Kết hợp với aspect-ratio
Khi mỗi ô có ảnh, đặt aspect-ratio cho khung ảnh để mọi thẻ cao bằng nhau và không bị xô lệch bố cục khi ảnh tải.
.card img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}Hỗ trợ trình duyệt
CSS Grid được mọi trình duyệt hiện đại hỗ trợ từ năm 2017, nên bạn có thể dùng ngay cho mọi dự án mà không cần phương án dự phòng.