Чтобы использовать ключевое слово auto-fit в grid-template-columns для создания адаптивной сетки, нужно указать функцию repeat(). 13 Она позволяет определять множество столбцов или рядов. 1 Первый параметр — количество раз, второй — что повторять. 1

Пример использования: 1

grid-template-columns: repeat(4, 100px);  // Повторять 100px четыре раза< 1/code>

Auto-fit работает почти так же, как auto-fill. 2 Разница в том, что auto-fit сжимает все пустые дорожки в конце компоновки, а auto-fill — нет. 2

Пример использования с функцией minmax(): 1

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  // Устанавливает минимальный размер столбцов 100 пикселей, а максимальный&nbsp;—&nbsp;оставшееся пространство< 2/code>

Сочетание auto-fill и auto-fit в комбинации с minmax() в grid-template-columns позволяет создать гибкий и адаптивный макет без необходимости использовать множество медиазапросов. 3