如何评估 CSS 网格中大网格区域旁边的一行的最大内容和最小内容？答案

【问题标题】：How max-content and min-content are evaluated for a row aside to a big grid-area in CSS grid?如何评估 CSS 网格中大网格区域旁边的一行的最大内容和最小内容？
【发布时间】：2020-03-17 14:16:09
【问题描述】：

根据 MDN 文档 (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)：

最小内容

是一个关键字，表示占据网格轨道的网格项的最大最小内容贡献。

所以，在这个例子中：

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: max-content max-content max-content min-content;
  grid-template-areas:
    "one aside"
    "two aside"
    "three aside"
    "four aside"
}

.one {
  background: red;
  grid-area: one;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}

.four {
  background: yellow;
  grid-area: four;
}

.aside {
  background: grey;
  grid-area: aside;
}

<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
  <div class="four">
    Four
  </div>
  <div class="aside">
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
  </div>
</div>

为了获得“最小内容”值，为第四行评估的高度值是多少？ min-content 评估的 aside 网格区域第四行的高度是多少？

https://jsfiddle.net/oygf360r/

在@temani-afif cmets 之后编辑：

为了澄清问题。我理解min-content 在这种情况下的行为。我想知道的是，浏览器如何计算这个值，因为第二列在该行中没有任何内容，因为 aside 的内容 em> 列属于所有行。在这种情况下，浏览器是否会忽略 aside 列进行比较？或者这些元素有什么特殊价值？

我也将它标记为浏览器，因为它可能与它更相关。

【问题讨论】：

@Paulie_D 在定义其他“行”的高度方面发挥了作用。那么问题来了，为什么黄色的 min-content 是最大的呢？尝试更改行模板上 min-content 的顺序以查看行为
@Paulie_D 但为什么只有最小内容的内容正在扩展？尝试例如：grid-template-rows: max-content min-content max-content min-content;，您会看到第二行和第四行正在扩展，而不是另一行

标签： css browser css-grid

【解决方案1】：

如果我没记错的话，它是edge case，这种情况是由于如何处理多个网格轨道上的元素（通过规范的浏览器实现）来确定网格大小。

在您的示例中，用于确定行分配空间的algorithm 未能满足根据grid-template-rows 属性值的重新分区，因此在 Chrome 中当前（2021 年 12 月）所有行都设置为自动：

如果您将至少一行设置为 1fr，算法会正确调度行之间的空间：

不同浏览器处理问题的区别：
（目前 Firefox 和 Google Chrome 一样）

【讨论】：