Можно ли изменить размер сетки, чтобы все элементы реагировали на новый размер?

Question

У меня есть div с display: grid внутри. У меня есть несколько 3 divs для каждого элемента.

.test-container {
  //width: 10px;
  //height: 10px;
}

.coin-chart-grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 0.5fr 1fr;
  //width: 10px;
  //height: 10px;
}

.coin-chart-grid-item-1 {
  grid-column-start: 1;
  grid-row-start: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
}

.coin-chart-grid-item-2 {
  grid-column-start: 1;
  grid-row-start: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
}

.coin-chart-grid-item-3 {
  grid-column-start: 2;
  grid-row-start: 1;
  grid-row-end: 3;
  height: auto;
  width: 100%;
}

<div class="test-container">
  <div class="coin-chart-grid">
    <div class="coin-chart-grid-item-1">
      Some Text
    </div>
    <div class="coin-chart-grid-item-2">
      Some Text
    </div>
    <div class="coin-chart-grid-item-3">
      <LineChart class="coin-chart" :data="chartData" :options="chartOptions" />
    </div>
  </div>
</div>

Я установил линейную диаграмму как отзывчивую. Но когда я пытаюсь поместить все в div coin-chart-grid и изменить его размер div, вся вещь просто движется вниз. Как это может быть?