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

Чтобы изменить высоту второй колонки грида так, чтобы она оставалась пропорциональной высоте первой колонки, вы можете использовать CSS свойство `grid-template-rows` и задать значение в процентах.

Пример:

```css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

.item-2 {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
}
```

Чтобы отключить расширение высоты второго блока при нажатии на блок в ряду, где находятся два блока, вы можете использовать JavaScript для добавления/удаления класса, который будет изменять стиль блока.

Пример:

```html
<div class="grid-container">
  <div class="item-1">Блок 1</div>
  <div class="item-2">Блок 2</div>
  <div class="item-2">Блок 3</div>
</div>

<script>
  const items = document.querySelectorAll('.grid-container>div');

  items.forEach(item => {
    item.addEventListener('click', () => {
      if (item.classList.contains('expanded')) {
        item.classList.remove('expanded');
      } else {
        item.classList.add('expanded');
      }
    });
  });
</script>
```

```css
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

.item-2 {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  transition: height 0.5s ease;
}

.item-2.expanded {
  height: auto;
}
```

В данном примере при нажатии на блок `.item-2`, ему будет добавляться класс `.expanded`, который устанавливает `height: auto`, чтобы блок расширялся по содержимому.