用 display: grid 替代 flex-wrap 是最直接解法，因其 justify-content 天然作用于整行轨道，末行自动左对齐，无需占位或伪元素；推荐 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))。
用 display: grid 替代 flex-wrap 是最直接解法
Flex 的 justify-content 对多行无效，本质是它不把“末行”当特殊行处理；Grid 则天然按网格单元分配空间，justify-content: start（或 flex-start）对整块网格生效，末行自动左对齐，无需占位、无伪元素、不依赖项数。
关键不是“修复末行”，而是换掉不擅长多行对齐的布局模型。
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))—— 动态列数下最稳写法，auto-fit会合并空轨道，避免末行右侧留白 - 固定列数场景可写
grid-template-columns: repeat(4, 1fr)，再配justify-content: start - 别用
gap+justify-content: space-between混搭，这又回到 flex 的末行问题逻辑里 - IE11 不支持
auto-fit和minmax，如需兼容，得降级到repeat(4, 1fr)+ JS 补空格
justify-content: start 在 Grid 中为什么能生效
Grid 的 justify-content 控制的是**整个网格容器内所有轨道（columns）组成的整体**在行轴上的对齐方式。即使最后一行只有 2 个子项，只要列轨道已由 grid-template-columns 定义完毕，剩余轨道会被压缩或忽略（auto-fit 下），内容自然靠左。
对比 Flex：它的每行是运行时生成的“行盒”，justify-content 只作用于该行内项目，不控制轨道本身。
-
auto-fit和auto-fill行为不同：auto-fit会折叠空轨道，auto-fill保留空轨道，导致末行右侧仍有空白 - 如果用了
grid-auto-flow: dense，且子项有grid-column跨列，justify-content: start仍有效，但视觉可能因重排而错乱 - 移动端 Safari 旧版本对
minmax()解析不稳定，建议加@supports (display: grid)条件包裹
避免踩坑：别在 Grid 里套 Flex 的思路
常见错误是保留 flex 的“两端对齐”惯性，比如给 Grid 容器加 justify-content: space-between，或试图用 :last-child 给末行子项加 margin-right: auto —— 这些在 Grid 中既无效，又干扰轨道计算。
- Grid 子项的
margin不参与轨道对齐，只影响自身盒模型；想调间距请用gap -
justify-content: start已足够，不需要额外伪元素或空<div> <li>若子项高度不一，末行视觉“不齐”是正常现象（基线对齐未设），应配 <code>align-items: start或align-content: start - 响应式断点改
minmax()第二参数时，注意单位一致性（200pxvs1fr），否则auto-fit可能失效 - Caniuse 显示
display: grid全局支持率已达 98.5%，但subgrid和gap在 Safari 15.4 之前需-webkit-前缀 - 真要兼容 IE，
grid-template-columns: repeat(4, 1fr)+justify-content: start是唯一能稳定工作的 Grid 写法，auto-fit必须放弃 - 不要为“看起来一样”强求完全一致：IE 下末行右空一点，比整个布局错位更可接受
兼容性与 fallback 的现实取舍
现代项目基本可放心用 Grid，但如果你的用户里还有 Win7 + IE11 或 Android 4.4 WebView，就得准备降级方案——此时伪元素占位法反而比 JS 补 DOM 更轻量可靠。
