Grid通过justify-content和align-content可精准控制多行对齐，关键需设置display: grid与grid-template-columns；justify-content: start使各行左对齐，align-content: start使多行顶部对齐；禁用grid-auto-rows并避免跨列导致列数不整除，方保最后一行“不塌”。
Grid的justify-content和align-content怎么让最后一行“不塌”
Flex在多行布局中，flex-wrap: wrap后无法控制最后一行的对齐方式——比如你希望所有行（包括最后一行）都左对齐，但justify-content: flex-start只影响主轴剩余空间分配，而最后一行往往因为子项没填满整行，被自动居中或拉伸。Grid没有这个限制，靠justify-content（主轴）和align-content（交叉轴）直接控制整个网格容器的轨道分布。
关键点在于：Grid把“行”视为显式轨道，而Flex把“换行后的行”当隐式分组，不参与对齐计算。
-
justify-content: start→ 所有行左对齐，右侧留空（不是拉伸） -
align-content: start→ 多行时顶部对齐，不撑满容器高度 - 必须设置
display: grid+grid-template-columns（哪怕只是repeat(auto-fill, minmax(200px, 1fr)))），否则justify-content对多行无效
用grid-auto-rows配合align-content避免最后一行高度异常
Flex里最后一行子项高度不一致时，整行会被拉高到最大项高度；Grid默认每行高度由内容决定，但如果你用了grid-auto-rows: 1fr，反而会让最后一行强行等高——这不是你想要的“对齐”，而是“扭曲”。要保留自然高度又保持对齐，得关掉自动行高控制。
- 去掉
grid-auto-rows，让行高由内容撑开 - 用
align-content: start确保各行顶部对齐（而不是默认的stretch） - 如果需要统一行高，改用
grid-template-rows: repeat(3, 1fr)（显式定义三行），而非auto-rows - 注意：
align-content只在多行且容器有剩余高度时生效；单行时它完全不起作用
兼容性陷阱：gap和justify-content在旧版Safari中的表现差异
Safari 14.1之前不支持justify-content在grid上的多行对齐（会退化为stretch），而且gap在旧Safari中会吃掉justify-content: start的左侧空白，导致第一列贴边。这不是bug，是规范实现顺序问题。
立即学习“前端免费学习笔记（深入）”；
- 加
padding-left兜底，比如padding-left: 8px，抵消gap的“吞边”效应 - 避免在旧Safari环境用
justify-content: center+gap，容易出现整体偏移 - 可以用
@supports (display: grid) and (justify-content: start)做特性检测，降级回Flex+伪元素模拟对齐
别忘了grid-column跨度会影响justify-content的计算基准
Grid里某个子项写了grid-column: span 2，它会占据两列宽度，但justify-content: start仍然按“列轨道数”来排列整行——也就是说，这行实际可用列数变少了，但对齐逻辑不变。结果就是：最后一行如果有跨列项，可能看起来“不对齐”，其实是列数不足导致的视觉偏差。
- 检查是否所有跨列项的
span值能被总列数整除（如4列容器里避免span 3） - 用
grid-template-columns: repeat(4, 1fr)比auto-fit更容易预测对齐行为 - 调试时打开浏览器开发者工具的Grid overlay，看轨道是否真被跨列项“挤歪”了
最后一行对齐这事，表面是布局问题，实质是“谁在控制行容器”的认知差异。Flex里没有“行容器”这个实体，Grid有。所以别试图用Flex的思路去调Grid，也别指望justify-content在没定义列的情况下生效。
