css-网格自动列宽
css-grid auto column width
我正在使用 css 网格处理 UI 并且发现了一个稍微奇怪的行为，即如果我定义一个网格：
grid-template-columns: 50px auto 50px
我没有看到网格扩展到容器宽度的 100%，如下图所示：
如果我将自动区域中的内容加宽到会强制网格填充 space 的范围，问题似乎就会消失。但我的理解以及我所看到的所有示例都表明该模板应扩展到视口宽度的 100%。
我是不是漏掉了什么？当然感觉像，有什么想法吗？
在您的规则中：
grid-template-columns: 50px auto 50px
auto 值将列宽设置为内容的宽度。 auto 表示基于内容。
所以列的总宽度最终与行的宽度没有关联。
50px + content width + 50px can be anything
如果您希望列填满行的宽度，请使用 分数单位 告诉第二列消耗所有剩余的 space。
grid-template-columns: 50px 1fr 50px
此处有更多详细信息：
我正在使用 css 网格处理 UI 并且发现了一个稍微奇怪的行为，即如果我定义一个网格：
grid-template-columns: 50px auto 50px
我没有看到网格扩展到容器宽度的 100%，如下图所示：
如果我将自动区域中的内容加宽到会强制网格填充 space 的范围，问题似乎就会消失。但我的理解以及我所看到的所有示例都表明该模板应扩展到视口宽度的 100%。
我是不是漏掉了什么？当然感觉像，有什么想法吗？
在您的规则中：
grid-template-columns: 50px auto 50px
auto 值将列宽设置为内容的宽度。 auto 表示基于内容。
所以列的总宽度最终与行的宽度没有关联。
50px + content width + 50px can be anything
如果您希望列填满行的宽度，请使用 分数单位 告诉第二列消耗所有剩余的 space。
grid-template-columns: 50px 1fr 50px
此处有更多详细信息：