CSS网格自动列宽

Question

我正在使用CSS网格制作UI，但发现了一种略微奇怪的行为，即如果我定义一个网格：

grid-template-columns: 50px auto 50px

我没有看到该网格扩展到容器宽度的100％，如此图片所示：

如果我将自动区域中的内容扩展到强制网格填充空间的程度，问题似乎就会消失。但我的理解和所有我看过的例子都表明，此模板应扩展到视口宽度的100％。

我有什么遗漏吗？肯定感觉是这样，有什么想法吗？

- dougajmcdonald

Answer 1

在你的规则中：

grid-template-columns: 50px auto 50px

auto 值将列宽设置为内容宽度。 auto 表示基于内容。

因此，列的总宽度与行的宽度没有关联。

50px + content width + 50px can be anything

如果您想让列填满行的宽度，则使用分数单位告诉第二列消耗所有剩余空间。

grid-template-columns: 50px 1fr 50px

更多细节请参见：CSS Grid是否有flex-grow函数？

- Michael Benjamin