CSS Grid auto-fit vs auto-fill

Hôm nay tôi học được sự khác biệt tinh tế nhưng quan trọng giữa auto-fit và auto-fill trong CSS Grid.

Sự khác biệt

• auto-fill: Tạo nhiều cột nhất có thể, ngay cả khi chúng trống
• auto-fit: Thu gọn các cột trống và kéo dài các item để lấp đầy không gian có sẵn

Ví dụ

CSS

/* auto-fill - giữ các cột trống */
.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
 
/* auto-fit - thu gọn các cột trống */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Sử dụng auto-fit khi bạn muốn các item lấp đầy container, và auto-fill khi bạn muốn duy trì cấu trúc cột ngay cả với ít item hơn.