必须用 repeat(auto-fill, minmax(280px, 1fr))) 实现响应式网格：auto-fill 预留空列保结构稳定，minmax 设定卡片最小宽度与弹性伸缩，配合 gap 和无固定宽的卡片，确保多端自适应且不溢出。
grid-template-columns 用 repeat(auto-fill, minmax(...)) 才能响应式撑满
固定列数（比如 repeat(3, 1fr)）在卡片数量少于 3 时会留白，多于 3 时又换行错位。真正要的是“尽可能塞满容器宽度，每张卡有最小宽度、最大能等分”，必须靠 auto-fill + minmax() 组合。
关键不是填多少列，而是告诉浏览器：“只要还能放下一张最小宽度的卡，就继续生成一列”。
-
auto-fill会预留空列（即使没内容），保持网格轨道结构完整，后续 JS 动态增删卡片也不跳动 - 换成
auto-fit会合并空列，导致最后一行卡片突然拉宽——多数卡片布局不需要这种行为 -
minmax(280px, 1fr)表示：单列最小 280px，剩余空间下可伸缩均分；小屏时自动减少列数，大屏时增加列数
卡片本身别设固定 width，否则破坏 grid 的流式计算
如果给 .card 元素写 width: 300px 或 flex: 0 0 300px，它会强行撑开所在网格区域，可能溢出或触发横向滚动。grid 布局中，尺寸应由父容器的 grid-template-columns 主导。
- 卡片内文字、图片用
max-width: 100%防溢出 - 需要统一高度？用
align-items: stretch（默认值）+ 子元素高度自适应，而不是给卡片设height - 若需卡片间间距，优先用
gap，而非margin—— 后者可能在首尾多出空白
IE 不支持 auto-fill，但现代项目基本可忽略
IE10/11 完全不识别 auto-fill 和 minmax()，会直接退化成无样式或报错。如果你的项目仍需兼容 IE，就得用 @supports 降级或改用 Flexbox。
立即学习“前端免费学习笔记（深入）”；
- 检测方式：
@supports (display: grid) and (grid-template-columns: repeat(auto-fill, 1fr))) - 注意：Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+ 均完整支持，无需 polyfill
- 真实项目中，只要不面向政府旧内网或银行特定终端，直接用
auto-fill是安全的
完整可运行示例
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)));
gap: 16px;
}
.card {
border: 1px solid #ddd;
border-radius: 4px;
padding: 12px;
}
把上面 CSS 应用到任意数量子元素的容器上，无论 1 张还是 27 张，都会自动排列成合适列数，且始终贴边、不留多余空隙。唯一要注意的是：别在卡片上再套一层 display: grid 或 float，那会干扰主网格的轨道计算。
