justify-content: center 不生效是因为它控制网格子项在主轴的分布，而非让网格容器自身居中；容器需设 max-width 并配合 margin: 0 auto 才能实现自身居中。
直接给 Grid 容器加 max-width 和 margin: 0 auto 就行，但必须确保它不是 inline-grid，且父容器没限制宽度或触发收缩行为。
为什么 justify-content: center 在 Grid 容器上不生效？
因为 justify-content 控制的是 Grid 内部项目在主轴上的分布，不是让 Grid 容器自己居中。你试图居中的对象是整个容器，而这个属性作用对象是它的子项。
-
justify-content: center只在容器有“剩余空间”时起作用 —— 如果 Grid 容器本身宽度只有fit-content（比如没设宽、父元素是inline-block），那就没空间可分 - 常见误判：看到
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))就以为自动撑满，其实它只影响子项排列，不影响容器自身宽度 - 用开发者工具检查该容器的
computed width，如果远小于视口宽，说明它被内容包裹了，不是块级占满行为
正确做法：用 max-width + margin: 0 auto
这是最直接、兼容性最好、语义最清晰的方式，适用于绝大多数场景。
- Grid 容器本身设
display: grid（别用inline-grid） - 加
max-width: 1200px（按需改数值）和margin: 0 auto - 不需要额外 wrapper，也不依赖父容器是 Flex 或 Grid
- 若需响应式，直接在媒体查询里改
max-width，例如小屏下设为max-width: 100%
什么时候必须用三列 Grid 布局？
仅当你需要「全宽背景 + 居中内容」混合效果时，比如 header/footer 全屏、main 区域限宽居中 —— 这时不能靠单个容器的 margin: 0 auto，因为背景会跟着缩窄。
- 结构上必须把背景提一层到网格容器，内容用
grid-column: 2 / 3或命名区域限定在中间轨道 - 写法示例：
grid-template-columns: 1fr minmax(auto, 1200px) 1fr，中间列承载内容，左右1fr吃掉多余空间 - 注意：.main-content 本身不要设
width或max-width，它的宽度由中间轨道决定 - 如果只是单纯让一个卡片或表单居中显示，没必要上三列 Grid，反而增加维护成本
最容易被忽略的一点：Grid 容器是否脱离文档流。如果它被 position: absolute 或 float 了，margin: 0 auto 会失效 —— 这种情况得配合 left: 50% + transform: translateX(-50%)，但已不属于常规居中需求范畴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
