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

Question

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

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

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

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

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

有人知道为什么吗？

Answer 1

问题已解决。

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

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