用 auto-fit 而非 auto-fill 实现真自动换行，列数由容器宽度决定：小屏一列、中屏两列、大屏多列；minmax(280px, 1fr) 保障可读性与弹性，配合 gap 控制间距、width: 100% 防撑破，避免 margin 叠加及 masonry 兼容陷阱。
用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 实现真自动换行
这不是“看起来像瀑布流”，而是让卡片在小屏下自然缩为一列、中屏两列、大屏三列或更多——列数完全由容器宽度决定，不写媒体查询也能工作。关键在 auto-fit 而不是 auto-fill：前者会收缩空轨道，避免最后一行留大片空白；后者会预留空位，适合 JS 动态插入但纯 CSS 场景容易出视觉断层。
常见错误是把最小宽度设成 120px 或 150px，结果小屏强行塞进 4 列，文字挤成一条线。建议底线是 250px，兼顾可读性与换行灵敏度。
-
minmax(280px, 1fr)中的1fr必须写，写成max-content或固定值（如300px）会导致列宽不均、换行失效 - 卡片自身必须设
width: 100%，否则内容可能撑破网格项，尤其含图片或长文本时 - 别在卡片上加
margin，和gap叠加会造成间距翻倍；所有间距统一交给gap
为什么 grid-template-rows: masonry 在移动端基本不能用
Chrome 116+ 支持 masonry，但 Safari 和 Firefox 完全不识别该语法，@supports (grid-template-rows: masonry) 永远返回 false，无法做可靠降级。更麻烦的是，它生效条件极其苛刻：
- 必须显式写死
grid-template-columns（不能用auto-fit或auto-fill） - 子项不能跨行、不能跨列、不能有
float或position: absolute - 容器必须有明确
height或max-height，而移动端视口高度波动大，70vh常导致底部大片留白 - 哪怕只漏一条，Chrome 就静默回退为单列流布局，你根本收不到报错
所以生产环境里，别把它当“开关”去试，它本质是个高配玩具，不是可用方案。
移动端卡片高度不一致导致错位？优先用 align-content: start + grid-auto-rows: minmax(min-content, max-content)
卡片内容长度不同，Grid 默认按顶部对齐，但人眼关注的是底部是否齐平。想让每行自适应最高卡片、又不截断内容，align-items: end 不够稳——它依赖父容器有明确高度，而 Grid 容器通常没有。
-
align-content: start确保行与行之间紧凑堆叠，不拉伸空隙 -
grid-auto-rows: minmax(min-content, max-content)让每行高度由内部最高卡片决定，而不是固定值 - 如果必须底部对齐，且卡片结构可控，可在卡片内用
display: flex; flex-direction: column; justify-content: space-between配合min-height控制内容区，比全局设height更安全
兼容 IE11？用 @supports 隔离，别试图在同一个选择器里混写 fallback
IE11 对 auto-fit 和 minmax() 完全无感，直接忽略整条 grid-template-columns 声明，退化为普通块级流。这时候靠媒体查询重写规则没用，因为 IE 不解析 @media 里的现代语法。
正确做法是用特性检测隔离：
@supports (display: grid) and (grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)));
gap: 16px;
}
}
/* IE11 及更老浏览器走这里 */
.cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.cards > * {
flex: 1 0 280px;
}
注意：@supports 条件里必须包含一个 IE 完全不认识的语法（比如 minmax(0, 1fr)），否则它会误判为支持并执行现代规则，结果啥都不显示。
真正难的不是写对 Grid，而是当卡片里有异步加载的图片、字体重排、或用户粘贴了超长链接时，怎么让换行逻辑不崩——这些时刻，gap 和 minmax 的数值稳定性，比炫技更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
