Да, grid может автоматически растянуть по ширине не влезающий элемент, подобно свойству flex-grow при использовании wrap в flexbox.
Для этого можно использовать свойство grid-template-columns с помощью функции repeat() и параметра minmax().
Прежде всего, укажите контейнеру display: grid, чтобы задать элементам внутри контейнера гибкую сетку. Затем, задайте grid-template-columns внутри контейнера, чтобы определить колонки сетки. В функции repeat() указывается количество колонок, которые вы хотите создать, а параметр minmax() определяет минимальную и максимальную ширину каждой колонки.
Пример:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
В приведенном примере мы используем функцию auto-fit вместо конкретного числа колонок, чтобы позволить контейнеру автоматически растягиваться в зависимости от ширины содержимого и ширины контейнера. Параметр minmax(200px, 1fr) говорит, что каждая колонка должна быть шириной не меньше 200 пикселей и максимальной ширины равной доступной ширине контейнера.
Таким образом, если элементы не помещаются в одну строку, grid автоматически создаст новую строку и растянет элементы, чтобы они заполнили доступное пространство в строке.
Это позволяет создать адаптивную сетку, которая будет подстраиваться под изменение размеров контейнера и автоматически растягивать элементы по ширине.