css grid Высота колонки не зависит от высоты соседней колонки

Подскажите как можно сделать так, чтобы высота колонки не зависела от высоты соседней колонки. Нужно построить сетку таким образом, чтобы элементы в колонках не растягивались. Сейчас получается так, что если элемент в первой колонке имеет высоту скажем 200px а во второй 800, то и в первой он "растягивается" до 800px. Как сделать так, чтобы они не растягивались?

<div class="article-grid">
  <div class="article-col-head">1</div>
  <div class="article-col-title">2</div>
  <div class="article-col-img">3</div>
  <div class="article-col-blockquote">4</div>
  <div class="article-col-text">5</div>
  <div class="article-col-social">6</div>
</div>

.article {
    &-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: auto;
      grid-gap: 1px;
    }

    &-col-head {
      background-color: aqua;
      grid-column: 1/7;
    }
    &-col-breadcrumbs {
      background-color: burlywood;
    }
    &-col-date {
      background-color: chocolate;
    }
    &-col-title {
      background-color: red;
      grid-column: 1/7;
      grid-row: 2/3;
    }
    &-col-img {
      background-color: blue;
      grid-column: 7/13;
    }
    &-col-blockquote {
      background-color: green;
      grid-column: 7/13;
      grid-row: 2/3;
    }
    &-col-text {
      background-color: gray;
      grid-column: 3/7;
      grid-row: 3/4;
    }
    &-col-social {
      background-color: yellow;
      grid-column: 1/3;
      grid-row: 3/4;
    }
}