auto-fit最后一行不齐是因为空列被浏览器丢弃；auto-fill配合:empty隐藏空格子可保持对齐，且需避免display:none破坏网格流。
grid-template-columns: repeat(auto-fit, ...) 为什么最后一行不齐
因为 auto-fit 在容器宽度不足以撑满整行时，会把剩余列“收缩归零”，而不是保留空位。浏览器认为那些列没有内容，就直接塌掉了——这不是 bug，是规范行为。
- 实际效果：前几行 4 列正常，最后一行只剩 2 个子项，它们会左对齐，右边留白
- 根本原因：
auto-fit+minmax()中的最小值设得太小（比如minmax(200px, 1fr)），导致容器能塞下 4 列，但最后一行凑不齐 4 个元素，空列就被丢弃 - 对比
auto-fill：它会强制渲染所有可能列（包括空列），所以能保持网格结构对齐，但需配合visibility: hidden或伪类隐藏无内容的格子
用 auto-fill + :empty 隐藏空单元格
这是最可控、兼容性好（Chrome 66+ / Firefox 52+ / Safari 11.1+）的方案。关键不是让列消失，而是让空格子“不可见但占位”。
- 必须用
auto-fill启动固定列数布局 - 给子元素添加
:empty选择器控制视觉隐藏，同时保留grid-area占位能力 - 避免用
display: none—— 它会让格子彻底退出网格流，破坏对齐
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)));
gap: 1rem;
}
.grid > *:empty {
visibility: hidden;
height: 0;
margin: 0;
padding: 0;
}用 justify-content: stretch 配合 minmax 的最小值约束
如果子项高度不一致，最后一行“看起来没对齐”，常是高度坍塌导致的。此时对齐问题不在列，而在行高。
-
justify-content: stretch是 grid 容器默认值，但仅对齐整行，不拉伸单个子项 - 真正起作用的是
align-items: stretch（控制交叉轴）和子项自身min-height - 更稳妥的做法：在
minmax()中提高最小宽度阈值，例如从200px提到240px，减少“刚好卡住又不够填满”的临界情况
JavaScript 补齐空节点（适合动态数据）
当后端返回项数不确定，且设计要求“必须每行满员”，纯 CSS 难以兜底，就得 JS 干预。
立即学习“前端免费学习笔记（深入）”；
- 计算当前列数：
Math.floor(grid.offsetWidth / minWidth)（注意要减去 gap 总和） - 补空节点时，用
document.createElement('div')，并加class="placeholder"方便样式隔离 - 切勿用
innerHTML += '...'，会触发重排；应统一append()所有新节点
const cols = Math.max(1, Math.floor(grid.clientWidth / 250));
const remainder = items.length % cols;
if (remainder !== 0) {
for (let i = 0; i < cols - remainder; i++) {
const ph = document.createElement('div');
ph.classList.add('placeholder');
grid.append(ph);
}
}最后一行对齐问题本质是“容器尺寸、列定义、子项数量”三者没对齐。很多人盯着 auto-fit 改来改去，却忽略了 minmax() 的最小值是否合理，或者忘了 gap 也参与总宽计算——这些细节才是实际项目里最常漏掉的。
