auto-fill 保留空轨道适合 hover 动画，auto-fit 收缩空列更省空间；minmax(200px,1fr) 实现响应式列宽，需配合 display:grid 和合理父容器宽度；clamp() 可替代 minmax() 第一参数实现平滑响应式，但需注意 Safari 兼容性。
grid-template-columns: repeat(auto-fill, minmax(...)) 是最常用解法
直接用 repeat(auto-fill, minmax(200px, 1fr)) 就能实现列宽自适应、数量自动填充。关键不在“怎么写”，而在“为什么选 auto-fill 而不是 auto-fit”——前者保留空轨道（适合 hover 动画留位），后者会收缩空列（更省空间但动画易跳变）。
常见错误是写成 repeat(auto-fill, 200px)：这只会固定列宽，不响应容器变化；或者漏掉 minmax()，导致小屏下内容溢出。
-
minmax(200px, 1fr)表示每列最小 200px，剩余空间平均分 - 容器需设
display: grid，且父容器宽度不能是fit-content或未定义 - 子项默认不换行，若想强制单行加
grid-auto-flow: column
gap 和 justify-items 配合决定留白与对齐
gap 控制列间/行间间距，但注意它不作用于容器边缘——如果需要四周留白，得额外给容器加 padding。而 justify-items: start | center | end 只影响单个子项在轨道内的对齐，和整体居中无关；真要让整组 grid 居中，得靠父容器的 text-align: center（配合 inline-grid）或外层 flex 包裹。
容易踩的坑：justify-content: center 是对齐整个 grid 内容区域，不是对齐列；align-items 则控制行高方向，对纯横向布局常被误加。
立即学习“前端免费学习笔记（深入）”；
响应式断点里别硬写多套 repeat，用 clamp() 更简洁
与其在 @media 里反复改 grid-template-columns，不如直接用 clamp(250px, 25vw, 350px) 替代 minmax() 的第一个参数。例如：repeat(auto-fill, minmax(clamp(250px, 25vw, 350px), 1fr))——这样列宽随视口平滑变化，避免断点跳跃感。
注意：clamp() 在 Safari 13.1+ 才完全支持，老版本需降级为媒体查询 + minmax()。
子项跨列时 auto-fill 自动重排会失效
一旦某个子项用了 grid-column: span 2，后续项可能无法严格按“填满一行再换行”排列，尤其当列数不整除时。此时浏览器仍按轨道数分配，但视觉上会出现空隙。
解决思路只有两个：
— 改用 grid-auto-flow: dense（允许重排，但顺序可能打乱）
— 或手动控制每行列数，放弃自动填充，改用明确列数如 repeat(3, 1fr)
真正复杂的布局（比如瀑布流+跨列+响应式），grid 的自动填充能力很快见顶，这时候该切到 display: contents 配合 JS 计算，或直接换 column-count。
