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

Question

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

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

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

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

。它突出了为什么它是高度。

有人知道为什么吗？

Answer 1

解决了问题。

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

将其从"15rem

auto"更改为"15rem 1fr"允许嵌套按照我希望的方式运行。