在css网格中,最大内容和最小内容在一个大的网格区域之外是如何计算的?

2022-04-02 00:00:00 browser css 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相同)

相关文章