最稳响应式卡片栅格写法是grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，因auto-fit自动收缩空轨道并均分剩余空间，minmax确保单列最小280px且弹性伸缩，无需媒体查询或JS，配合gap、flex卡片内布局及图片约束即可稳定运行。
直接用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能跑通，不需要媒体查询、不靠 JavaScript、也不该用 float 或 inline-block。
为什么 auto-fit + minmax() 是唯一靠谱写法
这个组合不是“让卡片换行”，而是让浏览器根据容器宽度动态决定每行几列，并强制等宽——不依赖内容长度、不触发 subpixel 计算误差、不因图片加载延迟错位。
-
280px是单列最小可用宽度（iPhone SE 宽度下仍可读），不是“卡片最小宽度”；低于它就自动切单列 -
1fr是剩余空间分配权，不是固定尺寸；大屏下卡片会拉宽，建议配合.card { max-width: 400px }锚定视觉舒适区 - 必须用
auto-fit：它收缩空轨道，让 2 张卡片在宽屏下自动均分容器；auto-fill会保留空列，小屏易横向滚动或文字挤成两行 - IE11 不支持
auto-fit，但市占率已低于 0.03%，无需降级
卡片内部高度不一致？别用 height: 300px 硬撑
Grid 只管列数和行对齐，单张卡片高度由内容决定。标题短、描述长的卡片会把整行顶高，破坏视觉节奏。
- 给
.card加display: flex; flex-direction: column; height: 100%—— 注意必须有height: 100%，否则子元素flex-grow或margin-top: auto不生效 - 主体区域（如
.card-body）加flex-grow: 1吸满中间空白 - 按钮区域用
margin-top: auto贴底，禁用position: absolute（脱离文档流、Safari 高度算不准、影响可访问性） - 如果卡片高度差异极大，加
align-self: start到.card，避免短卡片被拉伸悬空
gap 和 margin 混用是多数人崩溃的第一步
很多人一边写 gap: 1.5rem，一边又给 .card 加 margin: 1rem，结果间距翻倍、小屏卡片挤到一起、甚至溢出容器。
立即学习“前端免费学习笔记（深入）”；
-
gap是 Grid 原生属性，只作用于网格项之间，不触发外边距合并，也不受子元素干扰 - 混用
margin会直接破坏 Grid 的轨道计算逻辑，尤其在auto-fit动态重排时表现不可预测 - 旧教程里用
:not(:last-child)清除末项 margin，现在纯属冗余；gap已覆盖全部需求 - Safari 14.1+ 才完整支持
gap，旧版可用grid-column-gap/grid-row-gap替代（仅限必要兼容场景）
hover 卡顿、跳动、下方卡片弹一下？不是性能问题
本质是渲染层变化没锚定基线：动效改了布局，但容器没预留空间，导致重排（reflow）。
- 给
.card加min-height: 180px（按内容基线定），比设死height更安全 - 动画只许用
transform和opacity；禁用top、left、margin-top—— 这些触发布局重算，低端设备明显掉帧 - 必须显式声明
transition，例如transition: transform 0.2s ease，否则部分 Chrome 版本有延迟 - 图片必须加
object-fit: cover和aspect-ratio: 16/9，否则加载抖动会触发重排，等高失效
真正难的不是写出第一版栅格，而是让图片不撑破、文字不溢出、hover 不跳、小屏不横向滚动——这些细节全在 minmax() 的两个值、gap 与 margin 的边界、以及卡片内部 flex 的嵌套层级里。
