Ячейка минимального содержимого CSS Grid расширяется на основе соседа

У меня есть сетка CSS, состоящая из двух столбцов и пяти строк (при разрешении выше 768 пикселей). Для всех строк установлено значение «min-content», за исключением последнего, для которого установлено значение auto.
Я определил области сетки шаблона, по одной для каждой «ячейки», за исключением одной, которая охватывает строки с 3-й по 5-ю во втором столбце — с именем a6 (в примере кода)

Когда контента в a6 мало или совсем нет, сетка ведет себя именно так, как я хочу. Однако, если добавить к а6 немного больше контента, области а5 и а7 увеличатся по высоте, несмотря на то, что их содержимое не изменится.

CSS:

    html,
    body {
      height: 100vh;
      padding: 0;
      margin: 0;
    }

    .maingrid {
      height: 100%;
      padding-left: 15px;
      padding-right: 15px;
      background-color: red;
      display: grid;
      grid-template-rows: min-content min-content min-content min-content min-content min-content min-content auto;
      grid-template-areas: 'a1' 'a2' 'a3' 'a4' 'a5' 'a6' 'a7' 'a8';
      grid-row-gap: .2em;
    }

    @media only screen and (min-width:768px) {
      .maingrid {
        grid-template-columns: 9fr 3fr;
        grid-template-rows: min-content min-content min-content min-content auto;
        grid-template-areas: 'a1 a2' 'a3 a4' 'a5 a6' 'a7 a6' 'a8 a6';
        background-color: darkcyan;
      }
    }

    .maingrid div {
      background-color: black;
    }

    .a1 {
      grid-area: a1;
      background-color: pink !important;
    }

    .a2 {
      grid-area: a2;
      background-color: aliceblue !important;
    }

    .a3 {
      grid-area: a3;
      background-color: aqua !important;
    }

    .a5 {
      grid-area: a4;
      background-color: blue !important;
    }

    .a4 {
      grid-area: a5;
      background-color: brown !important;
    }

    .a6 {
      grid-area: a6;
      background-color: burlywood !important;
    }

    .a7 {
      grid-area: a7;
      background-color: chartreuse !important;
    }

    .a8 {
      grid-area: a8;
      background-color: darkorange !important;
    }

HTML:

<main class = "maingrid">
  <div class = "a1">BLAH</div>
  <div class = "a2">BLAH</div>
  <div class = "a3">BLAH</div>
  <div class = "a4">BLAH</div>
  <div class = "a5">BLAH</div>
  <div class = "a6">
    at<br />at<br />
  </div>
  <div class = "a7">BLAH</div>
  <div class = "a8">
    <button type = "button" onclick = "BreakTheGrid();">click me :(</button>
  </div>
</main>

JS (просто чтобы кнопка переключения работала):

var isBroken = false;

function BreakTheGrid() {
  if (!isBroken) {
    $('.a6').html("the<br/>left<br />columns<br />have<br />expanded<br />boo!<br />");
  } else {
    $('.a6').html("no<br/>issue");
  }
  isBroken = isBroken == false;
}

Вот JSFiddle, воспроизводящий проблему: https://jsfiddle.net/up6afdj4/
Если вы нажмете кнопку в a8, вы можете переключить содержимое a6, таким образом переключая проблему.

Я только начал возиться с сеткой CSS, поэтому я ожидаю, что это что-то совершенно неправильное, но я не могу этого понять :)