中间固定、两边自适应的三栏布局正确写法是grid-template-columns: 1fr 200px 1fr，grid先预留中间200px刚性空间，再将剩余宽度均分给左右两列；需确保父容器有明确宽度，且网格项统一设box-sizing: border-box防错位。
grid-template-columns 怎么写才能让中间列固定、两边自适应
中间固定、两边自适应的三栏布局，不是用 1fr 200px 1fr（这是中间固定、左右均分剩余空间），而是反过来：两边用 1fr，中间用固定值。正确写法是：1fr 200px 1fr。
这个顺序决定了轨道分配逻辑：Grid 会先预留中间 200px 的刚性空间，再把剩余宽度平分给左右两列。只要父容器有明确宽度上下文（比如设置了 width 或处于块级流中），就不会塌缩。
常见错误是写成 auto 200px auto——auto 基于内容最小宽，两边没内容时会缩成一条线；而 1fr 能保证弹性撑开。
- 若需响应式退化（如小屏变单列），别只靠媒体查询改
grid-template-columns，建议配合minmax(0, 1fr)防止内容溢出破坏布局 - 避免在
1fr列里放display: inline-block或未设width的浮动元素，它们可能触发收缩行为 - IE 不支持
fr单位，如需兼容，得 fallback 到calc()或 Flexbox
全宽背景怎么套在中间固定列的外层
全宽背景不能直接加在网格项（如 .center）上，否则只覆盖该列宽度。必须把背景提一层到网格容器本身，再用子元素控制内容居中。
典型结构是：父容器设 display: grid + 全宽背景色/图，内部用 grid-column: 2 / 3（或命名区域）限定内容只出现在中间轨道，再靠 margin: 0 auto 或 justify-self: center 居中内容块。
示例关键 CSS：
.grid-container {
display: grid;
grid-template-columns: 1fr 200px 1fr;
background: linear-gradient(to right, #f0f0f0, #e0e0e0);
}
.center-content {
grid-column: 2 / 3;
width: 200px;
margin: 0 auto;
}
注意：如果 .center-content 内部还有嵌套布局，别忘了它默认不继承父容器的 grid 上下文，需要重新设 display。
gap 和 padding 混用时容易错位
当你要在中间固定列两侧留白（比如左右各 40px），别同时用 gap: 40px 和 padding——gap 是轨道间距，作用于列与列之间；padding 是内容内边距，作用于网格项内部。混用会导致视觉留白翻倍或对不齐。
推荐做法：全靠 gap 控制列间距，内容居中由网格项自身控制。例如想让中间列视觉上“离左右各 40px”，就设 grid-template-columns: 1fr 200px 1fr + gap: 40px，此时左右两列自动与中间保持 40px 空隙。
-
gap会影响所有行列，如果只要列间空隙，用column-gap: 40px更精准 - 如果中间列内容要「视觉居中但实际占满 200px」，就别给它设
padding，改用justify-self: center+ 内部子元素设max-width - 使用
gap后，别再用负margin去“修正”位置，Grid 的轨道模型不依赖流式偏移
为什么 content-box 下中间列宽度不准
当给中间列网格项设了 border 或 padding，又没调 box-sizing，它的实际占用宽度会超出 200px，导致整体列宽失衡、右侧被挤出视口。
根本原因是默认 box-sizing: content-box，200px 只算内容区，加上 padding: 10px 和 border: 1px 后，总宽变成 222px，Grid 轨道却仍按 200px 分配，造成错位。
解决方式只有一条：所有参与 Grid 轨道尺寸计算的网格项，统一加 box-sizing: border-box。
更稳妥的做法是在重置样式里全局设置：
*,
*::before,
*::after {
box-sizing: border-box;
}
漏掉这点，哪怕 grid-template-columns 写得再准，视觉也会偏移——尤其在带边框或内边距的卡片类布局中，这个问题高频出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
