CSS Grid’de auto-fill ve auto-fit arasındaki fark, boş alanın nasıl yönetildiğiyle ilgilidir:
auto-fill: Mevcut satır içinde olabildiğince çok sütun ekler ve boş alan kalsa bile bu sütunları korur. Ancak, içeriği olmayan boş sütunlar görünebilir.
auto-fit: Mevcut satır içinde olabildiğince çok sütun ekler, ancak fazla boşluk kaldığında sütunları genişletir. Boş sütunları kaldırarak mevcut içerikli sütunları genişletir.
Örnek:
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
Bu durumda boş sütunlar korunur.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
Bu durumda boş sütunlar kaldırılır ve mevcut sütunlar genişletilir.
Özetle:
- auto-fill → Izgaradaki hücreleri yerleştirir ancak boş hücreleri bırakır.
- auto-fit → Boş hücreleri kaldırır ve mevcut öğeleri genişletir.