grid-template-columns: 200px 1fr 200px 可实现左右固定、中间自适应的三栏布局，但需确保容器设 display: grid、有足够宽度上下文，且注意 auto 与 1fr 行为差异及兼容性断点处理。
Grid实现三栏流式布局：左右固定、中间自适应
直接说结论：grid-template-columns 用 200px auto 200px 就能搞定，但必须确保容器有明确的 display: grid 和足够宽度上下文，否则 auto 会塌缩成最小内容宽。
为什么auto不生效？常见布局失效原因
很多情况下中间栏没撑开，不是写法错，而是父容器没“可分配空间”：
- 父元素没设
width或max-width，又处于无约束的文档流中（比如body直接子元素），auto就按内容宽度算 - 忘了加
grid-template-areas或显式列定义，只写了grid-column-start等属性，Grid 不会自动推导三栏结构 - 用了
minmax(0, 1fr)替代auto，但没配overflow: hidden，导致长内容溢出破坏流式表现
grid-template-columns 中 auto vs 1fr 怎么选
二者行为完全不同，选错会导致响应异常或滚动条意外出现：
-
auto：基于内容最小宽度，允许收缩，适合侧边栏图标/文字固定宽度场景 -
1fr：强制均分剩余空间，哪怕中间内容为空也会占满，更适合“等高+填满”的视觉需求 - 混合用更灵活，比如
200px 1fr 200px—— 左右固定，中间弹性；若右侧要自适应内容，则改用200px 1fr max-content
示例关键代码：
container {
display: grid;
grid-template-columns: 200px 1fr 200px;
width: 100%;
}
兼容性与响应式断点里容易漏掉的点
Grid 布局在 Safari 10.1+、Chrome 57+、Firefox 52+ 都没问题，但要注意：
- IE 完全不支持
display: grid，别指望 fallback 自动生效，得单独写@supports not (display: grid) - 移动端小屏下三栏挤在一起？不能只靠
grid-template-columns，得配合媒体查询切换为1fr单列 - 如果中间栏含
table或内联元素，可能触发 Grid 的隐式行生成，建议显式加grid-auto-flow: column避免错位
真正麻烦的是嵌套：当三栏容器本身是某个 Flex 子项时，它的 width: 100% 可能被父级 flex-basis 截断，这时候得检查上层布局链，而不是反复调 grid 参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
