css grid自动换行卡片网格用repeat(auto-fill, minmax(300px, 1fr)))实现，需设gap、禁用子项固定宽；相比flex-wrap，grid天然等高对齐更优，移动端可微调minmax值并注意gap与内容区宽度协同。
用 CSS Grid 实现自动换行的响应式卡片网格
直接用 display: grid 配合 grid-template-columns: repeat(auto-fill, minmax(...))) 就能实现，不需要 JavaScript 或媒体查询硬编码断点。关键在 auto-fill 和 minmax() 的组合——前者让列数随容器宽度动态增减，后者保证每张卡片有最小宽度、又不会撑爆容器。
常见错误是写成 auto-fit 却没加 minmax()，或把 minmax(300px, 1fr) 写成 minmax(300px, auto)（auto 在这里不生效）。
实操建议：
-
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)))是最稳的写法，300px 是卡片最小宽度，1fr表示剩余空间均分 - 必须设置
gap（比如gap: 1rem），否则卡片间没间距，且gap会自动避开容器边缘 - 卡片自身别设固定
width，否则会破坏网格的弹性行为
为什么不用 flex-wrap？
Flex 布局也能做“自动换行”，但对齐和等高控制更麻烦：flex-wrap: wrap 下，不同行卡片高度不一致时，下一行会从最高卡片底部开始排，视觉错位；Grid 天然支持行内等高（同一行卡片自动拉齐），且列数变化更平滑。
典型翻车场景：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
display: flex+flex-wrap: wrap，再给子项设flex: 1 1 300px—— 在小屏下可能挤出横向滚动条，或卡片宽度跌破预期 - 忘了给 flex 容器设
align-items: stretch，导致卡片高度参差不齐
移动端适配的关键细节
不是所有设备都需要相同最小宽度。iPhone SE 屏宽仅 375px，设 minmax(300px, 1fr) 会导致单列；而 iPad 可能同时显示三列。这时可结合 @container 查询（需父容器设 container-type: inline-size），但兼容性有限；更稳妥的是降级为 minmax(280px, 1fr) 并靠 padding 和字体缩放保可读性。
注意点：
- 别在卡片内部用
width: 100%包裹图片，应改用img { width: 100%; height: auto; }防止溢出 - 如果卡片含绝对定位元素（如角标），需确保父卡片设
position: relative - 部分旧版 Safari 对
auto-fill解析异常，可加grid-auto-flow: column;回退（但极少需要）
当卡片内容高度差异大时怎么保持整齐
Grid 默认按行分配高度，但若某张卡片文字多、高度暴涨，整行会被它拉高，浪费空间。解决方法是限制卡片内容区域高度，并用 overflow: hidden 或渐变遮罩收尾。
推荐做法：
- 给卡片内容区（如
.card__body）设max-height: 120px+overflow: hidden，配合display: -webkit-box截断多行文本 - 避免对整个卡片设
height，否则破坏响应式弹性 - 若必须等高，用
align-items: start让卡片顶部对齐，比强行拉伸更自然
minmax() 的第一个参数要预留 gap 空间，例如容器 padding 为 1rem，gap 为 1rem，那 300px 最小宽度实际应评估为「280px 左右内容区 + 2×1rem」。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
