Есть ли способ заставить сетку CSS автоматически добавлять столбец, когда изображение достигает максимальной ширины? ⇐ CSS

[Anonymous]

У меня есть сетка. Каждая ячейка будет изображением максимальной ширины (в примере использовался простой цветной элемент div). Есть ли способ заставить сетку автоматически добавлять еще один столбец, когда изображения достигают максимальной ширины, а не просто увеличивать разрыв между ними? (то же самое касается удаления столбца при уменьшении его ширины до минимальной). Вот пример кода







.pet-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100vw;
}

.pet {
aspect-ratio: 1/1;
background-color: cadetblue;
max-width: 205px;
}


















Подробнее здесь: https://stackoverflow.com/questions/791 ... -max-width