Разница между auto-fit и auto-fill в функции repeat() заключается в поведении, когда недостаточно элементов, чтобы заполнить сетку по указанным условиям. 1
Auto-fill создаёт максимальное количество колонок, включая пустые. 1 Это свойство предпочитает использовать минимальную ширину для ячейки, даже если есть свободное место. 3 Когда колонки достигают своей максимальной ширины, они переходят на новый ряд, оставляя справа пустое пространство. 2
Auto-fit, в свою очередь, растягивает колонки, схлопывая пустые. 1 Ячейки заполнят всю ширину браузера, насколько хватает ячеек, не оставляя пустого пространства сбоку. 2
Таким образом, auto-fill подходит для ситуаций, когда важно поместить в строку как можно больше ячеек, а auto-fit — для случаев, когда нужно занять всё доступное пространство в строке и подстроить ширину ячеек под это пространство. 3