Создание гибких макетов с использованием автоматической подгонки
auto-fit
работает почти идентично auto-fill
. Единственное различие заключается в том, что, когда размер контейнера превышает размер всех объединенных элементов, auto-fill
сохраняет вставки пустых строк или столбцов и толкает ваши элементы в сторону, в то время как auto-fit
сворачивает эти пустые строки или столбцы и растягивает ваши элементы до установите размер контейнера. Заметка
Если ваш контейнер не может поместить все ваши предметы в одну строку, он переместит их на новый.
Во второй сетке используйте auto-fit
с repeat
чтобы заполнить сетку столбцами, которые имеют минимальную ширину 60px
и максимум 1fr
. Затем измените размер предварительного просмотра, чтобы увидеть разницу.