Разница между функциями auto-fit и auto-fill при использовании repeat в CSS Grid заключается в следующем:
- auto-fill заполняет строку максимально возможным количеством столбцов. 1 Новые колонки могут быть пусты, но они всё равно будут занимать отведённое им место в строке. 1
- auto-fit подгоняет текущее количество колонок под доступное пространство, расширяя их так, чтобы они заняли всё доступное пространство. 1 Браузер делает это после заполнения доступного пространства новыми колонками, после чего сжимает пустые столбцы. 1
Разница между функциями видна только, когда в строке есть место для новых колонок. 1 При использовании auto-fit контент будет растягиваться для заполнения всей ширины строки, а при auto-fill пустые колонки будут занимать место в строке наравне со своими непустыми соседями. 13