CSSGrid对齐优化技巧

CSS Grid 中的 `align-self` 和 `justify-self` 是精准控制单个网格子项在交叉轴与主轴对齐的利器，但它们仅作用于 `display: grid/inline-grid` 容器的直接子元素，且实际行为深受书写模式（如 `vertical-rl` 会翻转主轴方向）、父容器尺寸、子项自身约束（如固定高度或替换元素特性）影响；常见“设了却不生效”往往源于容器无明确高度、拉伸被限制或基线对齐干扰，而真正高效稳健的布局策略是优先使用容器级属性（如 `place-items: center` 或 `margin: auto`），将对齐逻辑上收至父层，既减少冗余代码，又提升可维护性与响应式可控性。

align-self 和 justify-self 的作用范围是什么

align-self 控制单个 Grid 子项在**交叉轴**（cross axis）上的对齐，justify-self 控制其在**主轴**（main axis）上的对齐。它们只对直接子元素生效，且仅当父容器是 display: grid 或 display: inline-grid 时才起作用。

注意：这两个属性不会影响 Grid 容器本身的对齐，也不作用于嵌套的 Flex 或 Grid 子容器内部——只管“自己这一格”。

• 如果容器设了 align-items 或 justify-items，子项的 align-self/justify-self 会覆盖它
• 默认值都是 auto，即继承父容器的 align-items/justify-items
• 设为 normal 在 Grid 中等价于 stretch（拉伸填充单元格）

常见对齐失效的三个原因

写好了 align-self: center 却没反应？大概率掉进以下坑里：

• 父容器没设 height 或内容高度不足，导致交叉轴没有“可居中”的空间（比如容器高度由内容撑开，而内容本身只有一行文字）
• 子项设置了 align-self: stretch（或未显式设置而继承了父级 align-items: stretch），同时又设了固定高度或 max-height，此时拉伸被限制，居中就不可见
• 子项是替换元素（如 ）且未设 vertical-align 或 height，浏览器可能按基线对齐逻辑干扰 Grid 对齐

justify-self 在不同书写模式下的主轴方向

justify-self 的“主轴”取决于 direction 和 writing-mode，不是永远左右方向：

• 默认 writing-mode: horizontal-tb（横排从左到右）→ 主轴是水平方向 → justify-self: start/end/center 表现为左右对齐
• 设了 writing-mode: vertical-rl（竖排从右到左）→ 主轴变成垂直方向 → 此时 justify-self: center 是上下居中，align-self: center 反而变成左右居中
• 因此不要硬记“justify 是水平”，要看实际布局流，调试时用浏览器开发者工具检查 computed 值里的 justify-self 解析结果更可靠

替代方案：什么时候不该用 justify-self/align-self

如果目标是让整个 Grid 区域内所有子项统一居中，优先用容器级属性：

• 全容器水平+垂直居中：用 place-items: center（等价于 align-items: center; justify-items: center）
• 只调某个子项偏移，但又不想破坏拉伸行为：改用 margin: auto（Grid 中 margin auto 在主/交叉轴都有效，且不依赖对齐属性）
• 需要响应式对齐切换（比如移动端左对齐、桌面端居中）：用 @container 或媒体查询控制 justify-items 更轻量，避免给每个子项重复加类

单独给几十个子项写 justify-self 不仅冗余，还容易因遗漏导致视觉错位——对齐逻辑越上收，越可控。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSSGrid对齐优化技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。