【发布时间】：2017-12-12 19:28:46
【问题描述】：
我正在开发一个带有 css 网格的 UI，并且看到了一个稍微奇怪的行为，即如果我定义一个网格：
grid-template-columns: 50px auto 50px
如果我将自动区域中的内容扩大到迫使网格填充空间的范围，问题似乎就消失了。但我的理解以及在我看到的所有示例中都表明该模板应该扩展到视口宽度的 100%。
我在这里遗漏了什么吗？确实有这种感觉，有什么想法吗？
【问题讨论】：
【发布时间】：2017-12-12 19:28:46
【问题描述】：
在你的规则中：
grid-template-columns: 50px auto 50px
auto 值将列宽设置为内容的宽度。 auto 表示基于内容。
所以列的总宽度最终与行的宽度没有关联。
50px + content width + 50px can be anything
如果您希望列填充行的宽度，则使用 分数单位 告诉第二列消耗所有剩余空间。
grid-template-columns: 50px 1fr 50px
【讨论】：