必须用1fr 800px 1fr：grid先预留中间800px刚性空间，再将剩余宽度均分给左右两列，确保撑满且居中；auto会因无内容塌缩成线，无法实现可靠居中。
grid-template-columns 用 1fr auto 1fr 还是 1fr 800px 1fr？
固定宽度页面居中，核心是让中间列刚性固定、左右列弹性撑开。必须写成 1fr 800px 1fr，不能写 1fr auto 1fr 或 auto 800px auto。auto 会按内容最小宽计算，没内容时左右直接塌成一条线；而 1fr 确保左右均分剩余空间，真正实现“撑满+居中”。
常见错误是给中间列设 width: 800px 却没在 grid-template-columns 里声明固定值——Grid 不会读取子项 width 来反推轨道，轨道必须显式定义。
- 父容器需有明确宽度上下文（如
width: 100%或处于块级流中），否则1fr无参照可分 - 若父容器被
max-width限制，且该值小于中间列宽度（如max-width: 700px），布局会溢出或压缩，需同步检查 - 所有网格项建议统一加
box-sizing: border-box，避免 padding/border 导致实际宽度超限错位
justify-content: center 为什么没效果？
justify-content: center 在 Grid 中只分配主轴（默认水平）上的**剩余空间**，它不拉伸容器本身。如果容器宽度只有 800px（刚好等于中间列），那就没有“剩余空间”可分配，自然不生效。
真正起作用的是轨道定义本身：1fr 800px 1fr 让浏览器先切出 800px 中间轨道，再把左右剩余宽度平分——这本身就是居中逻辑，和 justify-content 无关。
- 别在 Grid 容器上盲目加
justify-content: center，它对固定三列结构无意义 - 如果想让单个网格项（比如中间内容块）在轨道内居中，用
justify-self: center或margin: 0 auto - 确认容器不是
display: inline-grid，inline-grid 行为类似内联元素，宽度不自动撑满父容器
全宽背景色怎么只覆盖中间内容区？
全宽背景不能加在中间列的网格项上，否则只渲染 800px 宽。必须把背景提一层，设在 Grid 容器本身，再靠内容定位来“框住”居中区域。
典型做法：Grid 容器设全宽背景 + padding 或 grid-column 控制内容范围。例如：
.container {
display: grid;
grid-template-columns: 1fr 800px 1fr;
background: #f5f5f5; /* 全宽背景 */
}
.content {
grid-column: 2 / 3; /* 只占中间轨道 */
margin: 0 auto; /* 防止内容超出 800px */
}
- 避免用
width: 800px直接限制 .content，它可能被父容器 padding 挤压；优先用grid-column绑定轨道 - 如果中间内容需要响应式缩放（如小屏变 100% 宽），别只改
grid-template-columns，配合minmax(0, 1fr)防止内容溢出破坏布局 - IE 不支持
fr，如需兼容，得用calc()fallback，比如width: calc((100vw - 800px) / 2) 800px calc((100vw - 800px) / 2)
如何让中间内容块在 800px 轨道内水平垂直居中？
网格项自身不是弹性容器，默认不支持 align-items。要居中内部元素，有两种可靠方式：
一是把网格项变成 Flex 容器：
.content {
display: flex;
justify-content: center;
align-items: center;
}
二是用 Grid 自身的 place-items（更轻量，无需嵌套 display）：
.content {
display: grid;
place-items: center;
}
- 如果内容是文字或单个块级元素，
margin: 0 auto+text-align: center更简单，但不支持垂直居中 - 慎用
position: absolute居中，它会让元素脱离文档流，影响后续布局流 - 注意
place-items是justify-items和align-items的简写，仅作用于直接子元素，层级深了要逐层设置
真正卡住人的地方，往往不是写错 1fr，而是忘了父容器有没有撑开、有没有被 max-width 或 inline-grid 暗中限制。调试时直接看 computed width，比猜更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
