Как убрать во второй колонке грида расширение высоты пропорционально первой?

Чтобы убрать расширение высоты второй колонки грида, пропорциональное высоте первой колонки, можно использовать свойство align-self со значением stretch для второй колонки. Вот пример кода:

HTML:

<div class="grid-container">
  <div class="item1">Колонка 1</div>
  <div class="item2">Колонка 2</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px;
}

.item1 {
  background-color: #ddd;
}

.item2 {
  background-color: #aaa;
  align-self: stretch;
}

В данном коде мы создаем контейнер с классом .grid-container и две дочерние элементы с классами .item1 и .item2, соответственно. Установлены две колонки в гриде с помощью свойства grid-template-columns.

В первой колонке (item1) установлено фоновое цвет #ddd, а во второй колонке (item2) — #aaa.

Самое главное здесь — свойство align-self для .item2. Если установить ему значение stretch, то колонка 2 будет стремиться иметь такую же высоту, как и первая колонка.

css grid хорошо работает с пропорциями отношений ширины и высоты, однако не может обеспечить адаптивность без дополнительных правил css. Помните об этом, если вам нужно, чтобы ваш макет был полностью адаптивным для разных видов устройств и экранов.