Grid中margin: auto仅在单个轨道内对齐，非吸走容器剩余空间；失效主因是轨道无剩余空间、被justify-self/align-self覆盖、IE11不支持或行高未定义。
Grid中margin: auto只在单个网格单元内起作用
它不是“吸走整个容器的剩余空间”，而是让网格项在**自己所在的那个轨道（track）内部**对齐。比如一个项目落在 grid-column: 2 / 3 的列里，margin-left: auto 只会让它在第二列这个格子内右对齐，不会影响其他列宽度或把项目推出去。
为什么margin: auto在Grid里经常没反应？
常见失效原因有这几个：
- 网格轨道没留出可分配空间：比如
grid-template-columns: 1fr 1fr，两列等宽且填满容器，项目被锁死在格子里，左右无空可撑 - 项目被
justify-self或align-self显式覆盖——这两个属性优先级高于margin - IE11 完全不支持 Grid 中的
margin: auto，会直接忽略 - 行轨道高度未定义：用
grid-auto-rows: minmax(100px, auto)而非显式grid-template-rows，可能导致垂直方向无明确剩余空间
margin: auto实现水平+垂直居中的前提条件
想靠它一键居中，必须同时满足：
- 父容器是
display: grid（不能是inline-grid） - 该项目必须跨列跨行，例如
grid-column: 1 / -1; grid-row: 1 / -1，否则它只在局部格子内对齐 - 所在轨道要有可伸缩空间：比如
grid-template-rows: 100px 1fr 100px，中间的1fr才能提供垂直方向的剩余空间 - 不能设置
justify-self: start、align-self: end等干扰项
Flex和Grid中margin: auto的本质区别
Flex里它是空间分配器，Grid里它只是轨道内对齐开关：
立即学习“前端免费学习笔记（深入）”；
- Flex 中
margin-top: auto是让浏览器把交叉轴上所有未被内容占据的弹性剩余空间“吃掉”，从而推挤位置 - Grid 中
margin-top: auto只是在当前行轨道内，把项目在该行高度范围内垂直居中——如果行高刚好等于内容高，它就毫无变化 - Grid 不会因为某个项目设了
margin-left: auto就自动压缩左边列或拉宽右边列；Flex 却可能因margin-right: auto把后续兄弟元素“顶到最右”
margin: auto 行为完全绑定于轨道尺寸计算逻辑，一旦轨道由 auto、fit-content 或隐式生成，它的表现就极难预测。 
