В чем разница между repeat(auto-fill, 250px) и repeat(auto-fit, 250px)?

Разница между repeat(auto-fill, 250px) и repeat(auto-fit, 250px) заключается в поведении свойств auto-fill и auto-fit при использовании функции repeat() в CSS Grid. doka.guide webcademy.ru

auto-fill стремится поместить в строку как можно больше ячеек. webcademy.ru Это свойство предпочитает использовать минимальную ширину для ячейки, даже если есть свободное место. webcademy.ru Когда элементы заканчиваются, auto-fill создаёт пустые колонки, равномерно распределяя доступную область между существующими и «виртуальными» колонками. doka.guide

auto-fit стремится занять всё доступное пространство в строке и подстраивает ширину ячеек под это пространство. webcademy.ru Пустые колонки auto-fit схлопывает и отдаёт больше места под заполненные. doka.guide

Разница в работе свойств становится очевидной, когда свободного пространства много. webcademy.ru Если пространства недостаточно и происходит перенос на новую строку, разница в работе свойств становится незаметной. webcademy.ru