本文介绍了在css网格中，最大内容和最小内容在一个大的网格区域之外是如何计算的？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
根据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网格中，最大内容和最小内容在一个大的网格区域之外是如何计算的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！