Grid中最后一行不满列时自动撑满，justify-items无效；应使用grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))实现响应式填满，固定列数则需JS补足。
grid-template-columns + justify-items 不起作用？
直接说结论：CSS Grid 里让最后一行不满列的项目自动撑满，justify-items 或 justify-content 都不管用——它们只管整行对齐，不干预单个格子的尺寸逻辑。
真正起效的是靠 grid-auto-flow: dense 搭配显式列定义 + 项目自身 grid-column 跨列控制，但这样太重；更轻量且符合直觉的做法，是用 grid-template-columns 配合 minmax() 和 auto-fit，再加一层「占位补足」逻辑。
- 常见错误现象：
display: grid; grid-template-columns: repeat(4, 1fr)下，第9项（即第3行第1列）不会自动跨4列，而是老老实实占1列，留出3列空白 - 本质原因：Grid 默认按轨道划分空间，不感知“这是不是最后一行”，也不会重排已生成的轨道
- 兼容性影响：所有现代浏览器都支持
auto-fit+minmax()，IE 完全不支持，需另寻 fallback
用 auto-fit + minmax 实现动态占满
这是目前最可靠、无 JS、响应式友好的方案。核心是让 Grid 自动收缩列数，并把剩余空间分配给当前行的项目。
关键不在“最后一行特殊处理”，而在“让每行尽可能填满，且列数随内容自适应”。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) -
auto-fit会让空列被合并，剩余空间由实际存在的项目均分；auto-fill则会保留空列，导致末尾留白 - 如果希望固定列数（比如始终最多4列），但最后一行撑满，则必须放弃纯 CSS，改用 JS 计算余数后给最后一个不完整行的项目加
grid-column: 1 / -1 - 注意
minmax(250px, 1fr)中的250px是最小宽度，太小会导致列数爆炸；太大又可能无法触发“撑满”效果
JS 补足：当必须固定列数且最后一行要跨满
纯 CSS 在固定列数场景下做不到“智能识别最后一行并跨列”，这时 JS 是合理选择，而且只需几行。
思路很简单：拿到容器内所有子元素，算出总数量对列数取余，若余数不为0，就把最后一行的所有项目设为跨满整行。
- 示例逻辑（假设列数为4）：
const items = container.querySelectorAll('.grid-item'); const cols = 4; const remainder = items.length % cols; if (remainder !== 0) { const start = items.length - remainder; for (let i = start; i < items.length; i++) { items[i].style.gridColumn = '1 / -1'; } } - 容易踩的坑：
grid-column: 1 / -1要求父容器有明确的列轨道定义（如grid-template-columns: repeat(4, 1fr)），否则-1无意义 - 性能影响：仅在初始化或数据变更后运行一次，无持续开销；但若列表频繁增删，需节流或用 MutationObserver
- 服务端渲染（SSR）场景下，这段 JS 必须在 DOM 就绪后执行，不能依赖
DOMContentLoaded前的静态计算
flexbox 替代方案是否可行？
有人试过用 display: flex + flex-wrap: wrap，然后给最后一行单独加样式——但 Flex 无法定位“最后一行”，也没有伪类支持，所以这条路走不通。
- 常见错误尝试：
.container > *:nth-last-child(-n+4)看似能选末尾4个，但无法判断它们是否真在最后一行（换行受宽度影响） - Flex 下唯一勉强可用的方式是 JS 遍历元素，比对
offsetTop，找出 top 值最大的那批，再统一设flex: 1——但精度差、易误判、移动端 scroll 时可能错乱 - 结论：Flex 不适合这个需求；Grid 是语义和能力上唯一匹配的技术选型
真正麻烦的不是怎么写，而是得先想清楚：你到底需要“固定列数下的视觉占满”，还是“响应式列数下的自然填满”。前者绕不开 JS，后者一行 CSS 就够——但很多人一开始没区分这两者，结果卡在错误的解法里调半天样式。
