Расширять и сжимать элементы div, используя сетку CSS ⇐ CSS

[Anonymous]

Я новичок в CSS-сетке, поэтому даже не знаю, является ли это скорее флексбоксом или это возможно с помощью сетки. Но поскольку я нашел его, я предпочитаю его, поэтому было бы здорово, если бы он подходил для этого варианта использования.
У меня есть два элемента div, которые будут уменьшаться по мере уменьшения размера экрана. При размере около 800 пикселей это выглядит хорошо (рис.1), поскольку для оптимизации размер элементов div составляет 800 пикселей. Обратной стороной этого является то, что при размере 1600 пикселей много ненужного пробела (рис. 2).

^fig1^

^fig2^
Когда элементы имеют display: inline;, как в моем медиа-запросе, они реагируют на соответствующую ширину экрана.


Но опять же там 1600 пикселей это пробел?


Насколько я понимаю, сетка определяет соотношение строк и столбцов. Я предпочитаю этот метод другим методам расположения элементов, так как он намного чище, но я не уверен, что то, что мне нужно, вообще возможно - можно ли добиться такой отзывчивости с помощью CSS Grid? т.е. "высота" изгибается и сжимается при изменении ширины экрана?
Для справки, мой код для следующих элементов:
.d0 {
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 1fr 2fr;
}

.comp0_select_country {
grid-row: 1 / 2;
grid-column: 1 / 2;
}

.comp0point5_text_des {
grid-row: 2 / 3;
grid-column: 1 / 2;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... g-css-grid