最稳响应式卡片栅格写法是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))；auto-fit收缩空轨道并均分剩余空间，auto-fill则保留空列易致溢出或错位；minmax中280px为列最小宽度，1fr为剩余空间分配权。
直接用 CSS Grid 实现响应式卡片栅格，别绕弯子——grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 是当前最稳、最少维护的写法，比 Flexbox + flex-wrap 更可控，比 float 或 inline-block 完全淘汰。
为什么 auto-fit 比 auto-fill 更适合卡片列表
auto-fit 会收缩空余轨道，让剩余空间被已有列均分；auto-fill 则保留所有可能列位（哪怕没内容），容易在小屏下撑出横向滚动条或留白错位。
- 卡片数量少时（比如只有 2 张），
auto-fit让它们自动拉宽填满容器，auto-fill却可能硬留出 2–3 个空列 - 移动端宽度 375px，设
minmax(280px, 1fr)+auto-fit→ 自然单列；同参数配auto-fill→ 可能强行双列导致溢出 - Safari 15.4+ 支持
gap，但只对display: grid生效，inline-grid不行——所以别偷懒写成inline-grid
minmax(280px, 1fr) 中的两个值到底控制什么
280px 是每列最小可用宽度，不是“卡片最小宽度”；1fr 是剩余空间的分配权，不是固定尺寸。它不防文字溢出，也不约束图片高度。
- 若容器总宽 minmax(240px, 1fr)
-
1fr在大屏（如 1920px）下会让卡片无限拉宽，建议给.card加max-width: 400px锚定视觉舒适区 - 图片必须加
img { width: 100%; height: auto; }，否则固定高图会撑破网格项，尤其在小屏下
卡片内部怎么对齐才不因文字长度不同而错位
靠 display: flex; flex-direction: column，而不是设死 height 或用 position: absolute。关键是要让标题、描述、按钮在不同内容量下保持底部对齐一致。
立即学习“前端免费学习笔记（深入）”；
-
.card { display: flex; flex-direction: column; height: 100%; }—— 注意必须有height: 100%，否则子元素的margin-top: auto或flex-grow不生效 - 描述段落用
flex-grow: 1占满中间空白，按钮用margin-top: auto贴底，这样不管文字几行，按钮位置都稳定 - 避免给
.card设align-items: center，会导致子元素水平居中后图片变窄、文字换行异常
hover 动画导致卡片跳动或重排怎么办
本质是渲染层变化触发了重排（reflow），尤其是没预留空间时，transform: scale() 或 box-shadow 会让父容器重新计算布局流。
- 给
.card设min-height: 180px（根据内容基线定），比设固定height更安全 - 动画只用
transform和opacity，禁用width/height/margin类属性 -
box-shadow改用filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15))，性能更好，且不触发布局计算 - 不要全局加
will-change: transform，只对高频交互卡片局部启用，否则内存占用明显上升
真正难的不是写出那行 repeat(auto-fit, minmax())，而是理解它在不同设备宽度、不同内容长度、不同浏览器版本下的实际表现边界。最小宽度选 240px 还是 280px，得看你的首屏主力机型；gap 值从 16px 缩到 12px 是否影响可读性，得实机点开看——这些没法靠复制粘贴解决。
