Ở bài Responsive Layout với Grid Css mình đã giới thiệu cho các bạn cách responsive image với Grid. Trong bài đó mình có nhắc tới auto-fill và auto-fit trong repeat. Thì ở bài này mình sẽ giải thích về hai thuộc tính này.
Trước đó mình có nói với các bạn rằng repeat(số cột, width). Thì ở vị trí số cột, nếu như chúng ta điền số lượng cột thì chúng ta bắt buộc phải style các class lại để khi responsive nó có thể hiển thị số lượng item phụ hợp với kích thước layout. Do đó, auto-fill và auto-fit có thể giúp bạn responsive dễ dàng hơn (dù số lượng cột không giống như mong muốn của mình và bắt mình phải style lại cho phù hợp với số lượng mình muốn).
Vậy auto-fill và auto-fit khác nhau như thế nào?
Fill: có tác dụng tạo nhiều cột hết mức có thể trên một hàng. Do đó, nó có thể tạo nhiều cột ẩn để lấp đầy vị trí còn trống trên một hàng nếu như kích thước layout được mở rộng. Các cột nó tạo ra có thể chứa item hoặc để trống và chiếm một khổng không gian nhất định.
Fit: tạo số lượng cột sao cho phù hợp với một dòng. Nếu như khích thước thay đổi và các vị trí cột còn trống đó không có item để chứa thì tự động các cột hiện tại sẽ chiếm vị trí (mở rộng) các cột còn trống đó.
Nhìn thì có vẻ hơi khó hiểu. Vì vậy các bạn có thể xem video dưới đây để có thể hiểu rõ hơn về điều mình vừa nói
Bạn có thể nghỉ Fill rằng như thế này "Điền nhiều cột hết sức có thể trên một dòng. Càng nhiều cột càng tốt, ta không cần biết nó trống rỗng hay có chứa cái gì, cứ điền hết mức có thể và lấp đầy khoảng trống đó"
Còn Fits thì "Cứ kéo dài (mở rộng) các cột lấp đầy lên những khoảng trống có sẵn. Các cột trống không được tồn tại, chúng phải hi sinh khoảng trống đó cho các cột có sẵn." Đại loại vậy đấy
Như vậy mình đã giải đáp thắc cho các bạn về sự khác nhau hai thuộc tính trên rồi nhé.