CSS Grid子网格对齐问题解决方法

• .card 没设 display: grid，它只是个普通块级元素，根本没进入网格上下文
• 你给 .card 写了 grid-column: 2 / 4，这只是控制它在父网格里的占位，不是让它变成网格容器
• 想让 .card 内部三个图标横排？得单独给它加 display: grid; grid-template-columns: repeat(3, 1fr)

真正影响嵌套对齐的，是 align-self / justify-self 和容器高度

当你希望某个嵌套 Grid 容器（比如 .inner-grid）在父网格中居中，关键不在它内部怎么排，而在它自己怎么“摆”：

• 必须在 .inner-grid 元素上写 align-self: center 和 justify-self: center，而不是只设父容器的 align-items
• 如果父网格的对应轨道是 grid-template-rows: auto，align-self: center 可能无视觉效果——因为轨道没“高度空间”可居中
• 解决方案：要么给该轨道设固定高（如 100px），要么用 align-content: center（针对多行轨道），或确保父容器有明确高度（如 height: 100vh）
• 切勿在同一个元素上同时写 margin: auto 和 justify-self: end——前者会直接忽略后者

替代 subgrid 的更稳方案：用 place-items + 显式尺寸控制

若目标是让嵌套容器“看起来对齐到外层节奏”，与其冒险用 subgrid，不如：

• 在外层 Grid 中，用 place-items: center 控制嵌套容器自身的位置
• 给嵌套容器设统一尺寸（如 width: 200px; height: 120px），避免内容撑开导致错位
• 在嵌套容器内部，用 place-content: center 居中其子项（注意：这是控制子项在容器内的排列，不是网格轨道）
• 所有 fr 单位都基于**直接父容器**计算，嵌套越深，可用空间越小——别假设内层 1fr 和外层一样宽

真正卡住你的，往往不是 subgrid 支不支持，而是某一级容器忘了 display: grid，或某处 margin: auto 默默覆盖了 justify-self。先打开开发者工具，看 computed 样式里 display 是不是 grid，再查 justify-self 是否被划掉——比查兼容性表更快定位问题。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。