CSS 网格最小内容单元格基于邻居扩展

Question

我有一个两列五行的 CSS 网格(在 768 像素以上的显示屏上)。 所有行都设置为“min-content”，最后一行设置为自动。
我已经定义了模板网格区域，每个“单元格”都有一个模板网格区域，但覆盖第二列上的第 3 到第 5 行的网格区域除外 - 名为 a6(在示例代码中)

当 a6 中内容很少或没有内容时，网格的行为完全符合我的期望。但是，如果向 a6 添加更多内容，则 a5 和 a7 区域的高度会扩大，尽管它们的内容没有改变。

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 网格，所以我希望它是我完全错误的东西，但我无法弄清楚:)

Answer 1

通过将 auto 应用到第五行(其中包括 a6 网格区域)，您可以触发网格 auto 拉伸(stretch)算法，该算法会分配免费的网格区域覆盖的行之间的空间(规范 §11.5 、 §11.5.1 和 §11.8 )。

如果从 auto 切换到 1fr，最后一行会占用所有可用空间，将上面的行固定到顶部。

revised demo

有关自动空间分配的更详细说明，请参阅我的回答:

• Remove wide gaps in CSS Grid
• How do you collapse unused row in a CSS grid?

(插图由 Firefox DevTools Grid Inspector 生成。)