最稳写法是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，每列最小280px、最大均分剩余空间，auto-fit自动收缩空轨道，避免auto-fill导致的留白或溢出。
grid-template-columns 怎么写才能自动适配列数
关键不是写死几列，而是让浏览器自己算——repeat(auto-fit, minmax(280px, 1fr))) 是目前最稳定的做法。它表示：每列最小 280px，最大均分剩余空间，尽可能多放列，空余轨道自动收缩消失。
常见错误是把 auto-fill 和 auto-fit 搞混：auto-fill 会提前占满所有可能列位，导致最后一行留大片空白；auto-fit 才真正“自动换行”，空列直接塌缩。
- 最小宽度别设低于 250px，否则小屏上文字挤成一条线
- 容器必须有明确宽度（比如
width: 100%或max-width），否则minmax()失效 - 如果用了
padding，记得加box-sizing: border-box，不然列宽计算会偏大
gap 和卡片内部 margin 冲突怎么办
gap 是网格专用间距控制，它不和 margin 叠加，但很多人忘了清掉卡片自己的 margin，结果间距翻倍、最后一行错位。
正确做法是统一用 gap 管理行列间隙，卡片元素内部去掉所有 margin，只保留 padding 控制内边距。
立即学习“前端免费学习笔记（深入）”；
- 想让卡片高度一致？别硬设
height，容易截断内容；改用grid-auto-rows: minmax(min-content, max-content) - 底部对齐需求强的话，加
align-content: start配合align-items: end，比靠justify-items更可控 - 如果卡片内容高度差异极大，
grid-auto-flow: row dense可以减少空白空洞，但会打乱 DOM 顺序
响应式断点还要写一堆 media query 吗
不用。绝大多数场景下，只改 minmax() 的第一个参数就够了，其他规则复用即可。
比如桌面端用 minmax(280px, 1fr)，平板降到 minmax(260px, 1fr)，手机再降到 minmax(240px, 1fr) —— 全部在媒体查询里只覆盖这一项，不重写整套 display: grid。
- 避免在
@media里把最小值设太小（如120px），Grid 可能强行塞进 5 列，文字根本没法读 - 不要在不同断点里重复定义
grid-template-columns的结构，优先级和覆盖顺序容易出错 - 如果项目要兼容 IE11，
auto-fit和minmax()全部失效，得用@supports (display: grid)包裹现代写法
IE11 下 grid 自适应还能用吗
不能。IE11 的 display: -ms-grid 不支持 auto-fit、minmax()，也不响应容器宽度变化，本质是静态栅格。
试图用 Autoprefixer “补”语法只会让调试更痛苦，它补不了语义差异。
- 现实方案是降级：IE11 用户看到单列流式布局，用
@supports把 grid 样式隔开 - 别用 flex +
flex-wrap模拟多列来“兼容”，它无法保证等高、对齐和间隙一致性 - 如果业务强制要求 IE11 多列，只能手动写死各断点的
grid-template-columns，放弃自适应逻辑
真正麻烦的不是写法本身，而是当内容高度不均、容器宽度边界模糊、或嵌套了相对定位元素时，minmax() 的计算会悄悄偏移——这时候得靠 outline 临时描边查容器实际尺寸，而不是猜。
