title: Is it possible to resize a grid and have all items be responsive to the new size?
body: <p>I have a div with <code>display: grid</code> inside I have multiple 3 <code>divs</code> for each items.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="test-container"&gt;
    &lt;div class="coin-chart-grid"&gt;
      &lt;div class="coin-chart-grid-item-1"&gt;
        Some Text
      &lt;/div&gt;
      &lt;div class="coin-chart-grid-item-2"&gt;
        Some Text
      &lt;/div&gt;
      &lt;div class="coin-chart-grid-item-3"&gt;
        &lt;LineChart class="coin-chart" :data="chartData" :options="chartOptions" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I set the Linechart to responsive. But when I try to case everything in the <code>div</code> <code>coin-chart-grid</code> and resize that <code>div</code> the entire thing just moves down. How can this be?</p>