auto-fit + minmax() 能天然实现最后一行左对齐，因 auto-fit 仅渲染有内容的列轨道，避免空列占位，而 minmax(200px, 1fr) 保证每列最小宽度并均分剩余空间；误用 auto-fill 则会预分配所有列导致右偏。
直接用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))) 就行，不需要额外 hack，也不依赖 justify-content。
为什么 auto-fit + minmax() 能天然解决最后一行左对齐
Grid 的 auto-fit 会让空的列轨道自动收缩消失，而 minmax(200px, 1fr) 表示每列最小 200px、最大均分剩余空间。当容器宽度不足以撑满一整行时，多余列不会“占位”，新一行自然从左开始排列，右侧留白——这正是你要的“最后一行左对齐”行为。
常见错误是误用 auto-fill：它会保留所有可能的列轨道（哪怕没内容），导致最后一行右侧被“撑开”，看起来像居中或右偏。
-
auto-fit：有内容才渲染列，适合动态子项数量 -
auto-fill：按最大可能列数预分配轨道，适合固定列数+占位需求 - 兼容性没问题：Chrome/Firefox/Edge/Safari 15.4+ 全支持
如果设计稿强制要求每行固定 4 列，且卡片尺寸不可变
这时候不能靠 minmax() 弹性伸缩，因为卡片宽度 + 边框 + 间距是硬约束。Grid 本身不提供“仅对最后一行特殊对齐”的属性，justify-content 对单行有效，但对多行中的某一行无效。
立即学习“前端免费学习笔记（深入）”；
可行做法是退回到布局控制层：
- 给容器设固定宽度，比如
width: calc(4 * (card-width + gap)) - gap - 用
grid-template-columns: repeat(4, <code>card-width) 显式声明列数 - 配合
justify-content: start确保整行左对齐（不是针对最后一行，而是让所有行都左起） - 注意：此时若子项总数不是 4 的倍数，最后一行左侧对齐、右侧留白，符合预期
别踩 justify-content: space-between 这个坑
在 Grid 中对多行容器设 justify-content: space-between，只会影响**每行内部**的项目分布（首尾贴边），但它不会改变“换行后新行起点位置”。也就是说，它无法让最后一行的项目集体左移——因为那一行本身只有几个项目，space-between 依然会把它们拉到两端，反而加剧右侧留白问题。
真正起作用的是列轨道生成逻辑（auto-fit vs auto-fill）和容器宽度是否匹配列宽总和。
复杂点在于：当卡片带 border 或 outline 时，box-sizing 必须是 border-box，否则 minmax() 计算会失准；另外，gap 是独立于列宽的，不要把它塞进 minmax() 里去算。
