justify-content在grid容器中作用于整个网格轨道块在主轴方向的整体定位，而非单个子项；其生效前提是容器存在未被轨道占据的剩余空间，需配合显式定义的grid-template-columns/rows才能体现效果。
justify-content 在 grid 容器里到底对谁起作用
它只控制**整个网格轨道（grid tracks）在容器主轴方向上的整体位置**，不是对单个子项，也不是对内容本身。很多人误以为设了 justify-content: center 就能让每个 grid-item 水平居中，其实只是把所有行（或列）组成的“轨道块”整体推到中间。
常见错误现象：justify-content: center 没效果？大概率是因为容器没设宽，或者所有 grid-column 都是 auto 且内容刚好撑满，导致“轨道块”宽度等于容器宽度，没得可居中。
- 必须配合显式定义的
grid-template-columns（比如repeat(3, 1fr)）才能看出效果 - 当列轨道总宽度小于容器宽度时，空白才出现，
justify-content才有发挥空间 - 对单个子项水平对齐，请用
justify-self或justify-items
align-content 和 justify-content 是镜像关系，但容易搞反轴向
align-content 控制的是**网格轨道在交叉轴上的整体分布**，和 justify-content 是一对，但轴向取决于 grid-auto-flow 和 grid-template-rows/columns 的定义方式。默认 grid-auto-flow: row，主轴是水平（列方向），交叉轴就是垂直（行方向）——所以 align-content 影响的是行与行之间的空隙。
使用场景：多行 grid（比如 grid-template-rows: repeat(2, 100px) + 更多子项触发隐式行）+ 容器高度大于所有行高之和时，align-content 才生效。
立即学习“前端免费学习笔记（深入）”；
- 如果只有一行（或一列），
align-content完全无效 -
align-content: stretch是默认值，但不会拉伸行高，只在有额外空间时分配空白 - 想让单个子项在单元格内垂直居中？该用
align-self，不是align-content
justify-content/align-content 对隐式网格（implicit grid）同样有效
只要子项超出显式定义的行列范围，浏览器会自动生成隐式轨道（implicit tracks），而 justify-content 和 align-content 会对**全部轨道（显式 + 隐式）组成的整体**起作用。
性能影响很小，但兼容性要注意：IE 完全不支持这两个属性，哪怕写了也忽略；Safari 10.1+、Chrome 57+、Firefox 52+ 均支持。
- 测试是否触发隐式网格？加几个多余子项，再用
grid-auto-rows: 80px显式约束隐式行高 - 如果用了
grid-auto-flow: column，主轴变垂直，此时justify-content控制的是列之间的垂直间距 - 不要指望它替代
gap：它分的是轨道外的剩余空间，gap分的是轨道间的固定间隙
为什么有时候设了却像没设一样
最常被忽略的一点：这两个属性生效的前提是**容器存在“未被轨道占据的剩余空间”**。没有剩余空间，就无从“分布”。而这个空间是否产生，取决于你如何定义轨道尺寸和容器尺寸。
典型踩坑组合：
- 容器
width: fit-content或display: inline-grid→ 容器宽度由内容决定，几乎无剩余空间 -
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))在小屏下可能让列填满容器 →justify-content失效 -
grid-template-rows: 100vh且只有一行 →align-content无交叉轴剩余空间，无效 - 忘了清除父容器的
padding或border，视觉上“偏了”，其实不是属性没生效
复杂点在于：它不直接操作元素，而是调度轨道块的位置；一旦轨道块尺寸和容器尺寸咬合紧密，就彻底静默。调的时候先检查 computed styles 里的 “Grid Track Sizes”，再看容器尺寸，比瞎试快得多。
