css-grid 自动列宽

Question

我正在使用 css 网格开发 UI，并且看到了一个稍微奇怪的行为，即如果我定义了一个网格:
grid-template-columns: 50px auto 50px
我没有看到网格扩展到容器宽度的 100%，如下图所示:


如果我将自动区域中的内容扩大到强制网格填充空间的范围，问题似乎就消失了。但我的理解和我看到的所有示例都表明，这个模板应该扩展到视口(viewport)宽度的 100%。

我在这里错过了什么吗？当然感觉像它，有什么想法吗？

Answer 1

在你的规则中:

grid-template-columns: 50px auto 50px

auto value 将列宽设置为内容的宽度。 auto意味着基于内容。

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

50px + content width + 50px can be anything

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

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

更多详情: Does CSS Grid have a flex-grow function?