核心是用 auto-fit + minmax 实现列数自动适应：auto-fit 收缩空轨道使卡片撑满容器，minmax(280px, 1fr) 控制单列最小宽度与均分弹性，配合 card{min-width:0} 和 img{max-width:100%} 防溢出。
用 grid-template-columns: repeat(auto-fit, minmax(...)) 控制列数自动适应
核心是让 Grid 自动计算能放几列，而不是写死 repeat(3, 1fr) 这种固定列数。关键在 auto-fit（不是 auto-fill）——它会把空余轨道收缩掉，让卡片真正“撑满容器”。minmax(300px, 1fr) 表示每列最小 300px、最大均分剩余空间，这样小屏时列数减少，大屏时列数增加，无需媒体查询。
minmax() 的两个参数实际影响什么
第一个参数是单列最小宽度，决定何时“换行”；第二个参数是单列最大宽度，决定空间富余时如何分配。如果设成 minmax(250px, 2fr)，那两列就会占三等分中的两份，容易造成不对称；通常用 1fr 更稳妥。注意：这个最小宽度不是“卡片内容最小宽度”，而是网格轨道的最小尺寸，卡片内部仍需用 width: 100% 或 flex 布局来填满轨道。
- 设太小（如
minmax(100px, 1fr)）→ 小屏下可能挤出 4–5 列，卡片内容被严重压缩 - 设太大（如
minmax(400px, 1fr)）→ 平板横屏也可能只显示 2 列，浪费空间 - 推荐从
minmax(280px, 1fr)起手，在真实设备上缩放验证
卡片本身需要配合的 CSS 规则
Grid 只负责划分网格，卡片能否正常撑开、换行、保持比例，还得靠自身样式。尤其注意：如果卡片里有图片或固定高元素，没处理好会撑破网格轨道。
- 给卡片加
min-width: 0，防止内部长文本或 flex 子项强行拉宽（Grid 默认不截断） - 图片用
img { max-width: 100%; height: auto; }避免溢出 - 避免对卡片设
width或flex-basis，让它完全由 Grid 轨道控制 - 间隙用
gap，别用margin，否则破坏 Grid 自动对齐
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))));
gap: 1.5rem;
}
.card {
min-width: 0;
}
.card img {
max-width: 100%;
height: auto;
}
为什么 auto-fit 比 auto-fill 更适合卡片布局
auto-fill 会保留所有满足 minmax 条件的空轨道，即使没内容；auto-fit 会把这些空轨道合并为 0 宽，让剩余列自动拉伸填满。对卡片这种“内容驱动列数”的场景，auto-fit 才能实现真正的流式响应。
立即学习“前端免费学习笔记（深入）”；
- 用
auto-fill：容器宽 900px，minmax(300px, 1fr)→ 强行生成 3 列轨道，哪怕只有 2 张卡，第三列留白 - 用
auto-fit：同样条件 → 只生成 2 列轨道，每列各占 50% 宽度 - 调试时可在浏览器开发者工具中 hover
grid-template-columns，看实际生成了几条轨道
实际项目里最容易忽略的是卡片内部的弹性约束，尤其是文字溢出和图片尺寸。Grid 再智能，也救不了一个写了 white-space: nowrap 又没设 overflow: hidden 的标题。