跨列元素受容器对齐属性影响，可通过justify-self和align-self单独控制其对齐方式。例如设置justify-self: start使跨越多列的标题左对齐，或使用align-self: start实现垂直顶部对齐，从而精准调整布局效果。
当CSS Grid布局中子元素使用 col-span 跨越多列后，可能会出现对齐异常的问题，尤其是在设置了整体网格对齐方式（如 justify-items 或 align-items）的情况下。此时可以通过 justify-self 和 align-self 单独控制该子元素的对齐行为，实现精准微调。
问题原因：跨列元素仍受默认对齐影响
即使一个子元素跨越了多个列（通过 grid-column 实现），它在所占网格区域内的内容对齐依然会受到容器设置的 justify-items 或 align-items 影响。比如：
• 容器设置了 justify-items: center，所有子元素水平居中• 某个子元素 span 3 列，但其内部文字或子内容仍被居中，不符合设计预期
使用 justify-self 控制水平对齐
为需要特殊处理的跨列元素单独设置 justify-self，可以覆盖容器的 justify-items 设置。
• justify-self: start —— 内容靠左对齐• justify-self: end —— 靠右对齐
• justify-self: center —— 居中（可显式重置）
• justify-self: stretch —— 拉伸填满整个跨列区域
例如，一个跨越三列的标题希望左对齐：
立即学习“前端免费学习笔记（深入）”；
.title {
grid-column: span 3;
justify-self: start;
}
使用 align-self 控制垂直对齐
同理，align-self 可以调整跨列元素在行轴上的垂直对齐方式，适用于 align-items 被全局设定的情况。
• align-self: start —— 顶部对齐• align-self: center —— 垂直居中
• align-self: end —— 底部对齐
• align-self: stretch —— 拉伸高度（默认）
若某个跨列卡片需与同行其他项目顶部对齐：
.card-wide {
grid-column: span 2;
align-self: start;
}
基本上就这些。跨列本身不影响对齐属性的生效，关键是在具体元素上用 justify-self 和 align-self 主动覆盖默认行为，实现灵活布局。不复杂但容易忽略。
