CSSVì auto-fit thu gọn (collapse) các track rỗng về 0 rồi để các track có nội dung ăn hết phần dư. Còn 1 card thì mọi track khác biến mất, card duy nhất giãn theo 1fr chiếm trọn hàng.
auto-fill giữ nguyên các track rỗng. Card duy nhất chỉ rộng bằng một cột, phần còn lại là ô trống.
css
/* card giãn full khi thiếu item */
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
/* card giữ đúng bề rộng cột, chừa chỗ trống */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));Chọn theo ý đồ:
- Số item ít và muốn lấp đầy chiều rộng → auto-fit.
- Muốn card giữ kích thước ổn định, lưới không nhảy khi danh sách ngắn → auto-fill.
Muốn auto-fit nhưng chặn card quá rộng: đổi max thành giá trị cụ thể, ví dụ minmax(240px, 360px), hoặc thêm max-width cho card bên trong. Khi container rộng hơn tổng track thì hai từ khoá cho kết quả giống hệt nhau — khác biệt chỉ lộ ra lúc thiếu item.