Автоматически изменять размер элементов сетки, чтобы сохранять сетку внутри родительского div. ⇐ CSS

[Anonymous]

Есть ли способ автоматически изменить размер элементов сетки, чтобы вся сетка помещалась внутри родительского элемента div без переполнения?
Я использовал медиа-запросы и несколько столбцов Grid-Template-column записи, чтобы попытаться выбрать подходящие значения, чтобы сетка заполняла как можно больше доступного пространства в родительском элементе div и выглядела почти прилично.
Сетка вложена внутри .wrapper. Я читал о том, что родительскому элементу div требуется определенная ширина и высота, чтобы дочерний элемент управления знал, внутри каких границ следует оставаться, а не в процентных значениях.
.wrapper {
height: calc(100vh - 4vh);
width: calc(100vw - 4vh);
display: flex;
}

Пример CSS для сетки
.grid {
display: grid;
gap: 1vh;
max-width: 100%;
max-height: 100%;
margin: auto;
}

.image {
background-size: cover;
display: flex;
height: 100%;
width: 100%;
margin: 0;

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(10vh, 1fr));
}
}


Подробнее здесь: https://stackoverflow.com/questions/783 ... parent-div