css-grid自动列宽

我正在使用css网格的UI工作,并且已经看到一个有点奇怪的行为,即如果我定义一个网格:

grid-template-columns: 50px auto 50px

我没有看到网格扩展到容器宽度的100%,如下图所示:

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

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

在你的规则中:

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功能？