使用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))) 实现响应式自动换行网格，auto-fit 收缩空轨道，minmax 设定列宽范围，配合 gap 管理间距、align-content 控制行高，媒体查询仅调最小宽度，ie 需 @supports 降级。
grid-template-columns 用 minmax() + auto-fit 实现自动换行
卡片网格要随容器宽度自动调整列数，关键不是写死列数，而是让 Grid 自己算——minmax() 配合 auto-fit 是目前最可靠的做法。写成 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，意思是：每列最小 280px，最大占满剩余空间，尽可能多放列，空余空间平均分配。
别用 auto-fill，它会提前占位，导致最后一行出现大量空白卡片；auto-fit 会收缩空轨道，真正“自动换行”。最小宽度建议不低于 250px，否则在小屏上可能挤出不可读的窄列。
gap 和 justify-items 影响卡片对齐与间距
gap 控制行列间距，但要注意：如果卡片本身有 margin，会和 gap 叠加，造成意外留白。统一用 gap 管理间距，卡片内部去掉 margin。
justify-items: stretch（默认值）能让卡片撑满列宽，但如果卡片内容高度不一，容易看起来参差。想让卡片底部对齐，得配合 align-items: end 或给卡片设固定高度 + overflow: hidden。不过固定高度会截断长内容，更稳妥的是用 align-content: start 配合 grid-auto-rows: minmax(min-content, max-content)，让每行自适应最高卡片。
响应式断点只需改 minmax 的最小值，别重复定义 grid
很多人在 @media 里重写整套 display: grid 规则，其实没必要。只要改 minmax() 的第一个参数就行：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))); /* 平板 */
@media (max-width: 768px) {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)));
}
这样既减少 CSS 体积，又避免因选择器优先级或顺序引发的覆盖问题。注意：不要在媒体查询里把最小值设得太小（比如 120px），否则 Grid 可能强行塞进 4–5 列，文字完全不可读。
IE 不支持 auto-fit/minmax，需要 fallback 方案
如果项目仍需兼容 IE11，auto-fit 和 minmax() 全部失效，Grid 回退为单列流式布局。可以用 @supports 隔离现代写法：
@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))); }
}
然后单独给 IE 写传统方案：用 flex-wrap + flex-basis 模拟，或者直接用 inline-block + calc() 计算宽度。但要注意，IE 下 flex-basis 对 minmax() 无感知，必须手动设死宽度，比如 flex-basis: calc((100% - 20px) / 3) —— 这种硬编码反而更容易失控。
真正容易被忽略的是：Grid 自动换行依赖于父容器有明确宽度（比如 width: 100% 或 max-width），如果父容器是 display: inline-grid 或未设宽，auto-fit 会失效，表现为只显示一列。检查父容器的盒模型比调 Grid 属性更优先。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
