在css网格中，最大内容和最小内容在一个大的网格区域之外是如何计算的？ [英] How max-content and min-content are evaluated for a row aside to a big grid-area in CSS grid?

问题描述

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

最小内容

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

因此，在此示例中：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.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"值，第四行的高度值是多少？ min-content计算的旁网格区域的第四行的高度是多少？

https://jsfiddle.net/oygf360r/

在@temani-afif评论后编辑：

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

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

推荐答案

如果我没有记错，这是一个edge case，这种情况是由于处理多个网格轨道上的元素的方式(由规范的浏览器实现)来确定网格大小。

在您的示例中，根据grid-template-rows属性值确定行分配空间的algorithm无法满足重新分区，因此在Chrome Current(2021年12月)中，所有行都设置为AUTO：

如果至少将一行设置为1FR，则算法将正确调度行之间的空格：

处理该问题的浏览器之间的差异：
(目前Firefox的功能与Google Chrome相同)

这篇关于在css网格中，最大内容和最小内容在一个大的网格区域之外是如何计算的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！