CSSCả hai đi cùng repeat() để browser tự tính số cột, khác nhau ở cách xử lý track rỗng.
css
.fill { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.fit { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }Với container 1000px và chỉ 2 item:
| Số track tạo ra | Kết quả nhìn thấy | |
|---|---|---|
auto-fill | 5 (tạo cả track rỗng) | 2 item rộng 200px, còn lại là chỗ trống bên phải |
auto-fit | 5 rồi thu track rỗng về 0 | 2 item giãn ra chia đôi 1000px |
Khi số item đủ lấp đầy mọi track thì hai giá trị cho kết quả giống hệt nhau — đó là lý do nhiều người không thấy khác biệt.
Chọn thế nào:
- Muốn item luôn lấp đầy hàng, kể cả khi ít item → auto-fit (gallery, danh sách card).
- Muốn giữ đúng khung lưới, item ít thì để trống chỗ → auto-fill (lịch, bảng chỗ ngồi).
Lưu ý: lỗi hay gặp là dùng auto-fit cho danh sách thường chỉ có 1–2 phần tử — card sẽ giãn hết chiều ngang trang, trông vỡ thiết kế. Chặn bằng minmax(200px, 320px) thay vì 1fr.