css-grid自动列宽

Question

我正在使用css网格工作，并且看到了一个稍微奇怪的行为，即如果我用以下内容定义网格：

grid-template-columns: 50px auto 50px

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

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

我在这里遗漏了什么吗？当然感觉像，有什么想法吗？

Answer 1

在你的规则中：

grid-template-columns: 50px auto 50px

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

因此，列的总宽度最终与行的宽度无关。

50px + content width + 50px can be anything

如果您希望列填充行的宽度，请使用分数单位告诉第二列消耗所有剩余空间。

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

此处有更多详情：Does CSS Grid have a flex-grow function?