CSS Grids 嵌套和自动填充高度问题

Question

我在使用嵌套 CSS 网格时遇到问题，其中嵌套网格使用重复的自动填充模板列，然后强制外部网格的高度。

我在这里创建了一个示例:https://codepen.io/davshoward/pen/XzKKOG

您可以看到内容区域的高度太高了。如果删除该行:

grid-template-columns: repeat(auto-fill, 17.5rem);

...它强调了为什么它是高度。

有人知道为什么吗？

Answer 1

解决了问题。

有问题的参数是外网格上的“auto”。

将它从“15rem auto”更改为“15rem 1fr”允许嵌套按照我希望的方式运行。