grid 是目前实现三栏布局最直白的解法，通过 grid-template-columns: 200px 1fr 160px 直接定义固定-自适应-固定结构，中间列用 1fr 占据剩余空间，不受内容干扰，响应式只需覆盖列定义，现代浏览器已全面支持。
用 grid-template-columns 直接声明三栏结构
不需要嵌套、不依赖文档流顺序，grid 是目前最直白的解法。核心就是用固定值 + fr 单位组合声明列宽：
- 左侧固定 200px → 写
200px - 中间自适应 → 写
1fr（不是auto，否则不占剩余空间） - 右侧固定 160px → 写
160px
完整写法：
.container {
display: grid;
grid-template-columns: 200px 1fr 160px;
}
浏览器会严格按此分配列宽，中间列随容器缩放自动伸缩。
为什么不用 flex？它和 grid 的关键区别在哪
flex 能做，但逻辑上是“一维线性排列”，靠 flex: 1 撑开中间项；而 grid 是二维定位，列宽定义更可控。实际踩坑点包括：
-
flex下若子元素有min-width或内容过长，中间项可能不收缩（flex-shrink: 1默认生效，但受内容影响大） -
grid的1fr是纯粹的剩余空间均分逻辑，不受子项内容尺寸干扰 - 当需要后续加行（比如响应式断点下改为单列）、或对齐多行项目时，
grid的grid-row/grid-column控制更直接
响应式切换时 grid-template-columns 怎么改
别在媒体查询里重复写整套 grid 规则，只覆盖列定义即可：
.container {
display: grid;
grid-template-columns: 200px 1fr 160px;
}
<p>@media (max-width: 768px) {
.container {
grid-template-columns: 1fr; /<em> 全部堆叠 </em>/
}
}</p><p>@media (min-width: 769px) and (max-width: 1024px) {
.container {
grid-template-columns: 160px 1fr; /<em> 左固定 + 右合并 </em>/
}
}</p>
注意：不要用 grid-template-areas 做简单三栏，它适合复杂区域命名，反而增加维护成本。
兼容性与 fallback 方案要不要加
截至 2026 年，所有主流浏览器（Chrome/Firefox/Safari/Edge）已稳定支持 display: grid，连 Safari 14.1+ 都无前缀。真正要留意的是：
- 如果项目仍需支持 IE11，
grid不可用，只能退回flex+calc()（如width: calc(100% - 360px)），但会丧失语义清晰度 -
fr单位在极老 Android WebView（≤4.4）中表现异常，但这类设备市占率已低于 0.3%，通常可忽略 - 无需为现代项目写
@supports (display: grid)包裹，反而让 CSS 更难读
真正容易被忽略的，是 grid-gap 和 gap 的写法统一 —— 现代标准只用 gap，别混用 grid-gap，后者已被标记为过时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
