必须用auto-fit而非auto-fill，因其只生成有内容的列轨道并均分剩余空间，避免空列留白或横向滚动；auto-fill则预占所有可能列位，导致小屏下布局异常。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 就能实现，不需要媒体查询、不用 JS、不依赖子项 width 设置。
为什么必须用 auto-fit 而不是 auto-fill
两者行为差异极大：auto-fill 会按最小宽度“预占位”，哪怕没内容也生成空列轨道，导致容器被撑高、最后一行大量留白；auto-fit 只为有内容的列生成轨道，并把空余空间均分给现有列——这才是真正意义上的“自动换行”。
常见翻车现象：
- 写成
repeat(auto-fill, minmax(280px, 1fr))，小屏下出现不可见的空白列，影响滚动高度和语义结构 - 误以为
auto-fill更“安全”，结果在卡片数量少时整行塌陷或错位
minmax(280px, 1fr) 中两个参数的实际意义
minmax() 不是“范围容差”，而是明确约束：每列必须 ≥ 280px，且不能超过它在当前行中应得的等分空间（即 1fr）。浏览器先按 280px 尝试铺满，再把剩余宽度平均分配给实际存在的列。
立即学习“前端免费学习笔记（深入）”；
关键细节：
- 280px 是硬性底线，低于这个值文字可能挤成一行不可读；移动端 iPhone SE 屏宽仅 375px，设 300px 就只剩 75px 边距，建议 250–280px 更稳妥
-
1fr不能写成auto或max-content，后者会让列宽随内容膨胀，破坏换行逻辑 - 如果卡片内含图片或按钮，需确保它们不溢出：比如
img { width: 100%; height: auto; }，而非width: 100%包裹在固定宽容器里
间距、对齐与内容高度不一致怎么处理
gap 是唯一推荐的间距控制方式。别在卡片上加 margin，否则会和 gap 叠加，尤其顶部/底部容易多出一倍空白。
卡片高度参差问题最常被忽略：
- 默认
justify-items: stretch会让卡片拉满列宽，但行高由最高卡片决定——若某张卡片文字极多，整行都被拉高，浪费空间 - 想底部对齐？用
align-items: end；想统一视觉节奏？给内容区（如.card__body）设max-height: 120px; overflow: hidden; - 避免对整个网格设
height，这会让auto-fit失效——它依赖隐式行的自然高度计算
IE11 兼容和媒体查询降级要不要写
IE11 完全不识别 auto-fit 和 minmax()，连 @supports 都无法检测（它把整条 grid-template-columns 当作无效声明直接丢弃）。所以 fallback 必须显式提供：
- 基础层用
display: block+margin做单列流，再靠@supports (display: grid)包裹现代写法 - 媒体查询只改
minmax()的第一个参数，例如从280px改为260px，不要重写整套grid-template-columns—— 否则容易因优先级或顺序覆盖失败 - 别在媒体查询里把最小值设到 120px，Grid 可能强行塞进 4–5 列，文字缩成小点根本没法读
真正难的不是写对那行 CSS，而是意识到：所有子项必须放弃固定 width、所有间距必须交给 gap、所有高度控制必须落在内容区内——漏掉其中任意一点，auto-fit 就会悄悄失效，而且错误表现还不明显。
