推荐用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 实现自适应列数，auto-fit 合并空轨道，minmax 控制每列弹性范围，配合 box-sizing: border-box 和卡片内部流式布局，避免固定宽高导致错位。
用 grid-template-columns 配合 minmax() 控制列数变化
核心是让每列宽度在一定范围内弹性伸缩，而不是固定列数。直接写死 grid-template-columns: repeat(3, 1fr) 会卡死在 3 列，小屏照样挤。
推荐写法：
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}auto-fit 让浏览器尽可能多塞列，minmax(280px, 1fr) 表示每列最小 280px、最大均分剩余空间。屏幕缩小时，列自动减少，无需媒体查询。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
auto-fit和auto-fill看似一样，但auto-fit会合并空轨道，布局更紧凑 - 最小宽度设太小（如
200px）可能导致文字换行混乱；设太大（如360px）则大屏只出 2 列 - 如果卡片内容高度差异大，建议加
align-items: start防止顶部不对齐
卡片本身需设 width: 100% 并避免固定宽高
网格容器只管“列怎么排”，卡片内部若写死 width: 300px 或 height: 200px，就会撑破网格或留白错位。
正确做法：
- 卡片外层不设宽高，靠网格分配空间
- 图片用
img { width: 100%; height: auto; }保持比例 - 文字容器避免
min-height硬撑，可用display: flex; flex-direction: column;+flex: 1均衡拉伸
常见错误：给卡片加 max-width: 300px —— 这会让它在大屏中无法占满整列，中间留白。
需要兼容老浏览器时，float 或 inline-block 不是好选择
虽然 float: left + width: calc(33.333% - gap) 能模拟多列，但存在严重缺陷：
- 最后一行卡片数量不足时，会因高度不一致导致下一行错位（经典“圣杯塌陷”）
- 响应式需配合大量
@media手动切列数，维护成本高 -
inline-block的换行符空白会被渲染成间隙，必须删 HTML 换行或设font-size: 0，副作用大
结论：IE11 及以下才需降级方案；现代项目（Chrome/Firefox/Safari/Edge 79+）直接上 Grid，display: grid 兼容性已覆盖 95%+ 用户。
调试时重点检查 grid-column-end 和父容器 padding
卡片没对齐、右侧留白、列数突变——八成不是 Grid 写错了，而是：
- 父容器有
padding但没算进gap，导致总宽度超限，触发列数回退 - 某张卡片里写了
grid-column: span 2之类声明，破坏了自动布局流 - 卡片内嵌了
position: absolute元素，脱离文档流后影响网格尺寸计算
快速验证：临时加 outline: 1px solid red 到卡片和容器，看是否贴边、间隙是否均匀。别一上来就改 repeat() 参数。
实际项目中，最常被忽略的是卡片内部的 box-sizing。默认 content-box 下，padding 和 border 会额外加宽，导致卡片撑出网格列宽。务必统一写 * { box-sizing: border-box; }。
