css - CSS Grid min-content 单元格基于邻居扩展

问题描述

我有一个两列五行的 CSS 网格（显示在 768 像素以上）。所有行都设置为“最小内容”栏最后一个，设置为自动。
我已经定义了模板网格区域，每个“单元格”一个，除了一个覆盖第二列第 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 网格，所以我希望它是我完全错误的东西，但我想不通:)

标签： csscss-grid

通过应用auto到包含a6网格区域的第五行，您将触发网格拉auto伸算法，该算法在网格区域覆盖的行之间分配可用空间（规范§11.5、§11.5.1和§11.8）。

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

修改后的演示

有关auto空间分布的更详细说明，请参阅我的答案：

（由Firefox DevTools Grid Inspector生成的插图。）

css - CSS Grid min-content 单元格基于邻居扩展

问题描述

解决方案

推荐阅读