直接用grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))即可实现真正自适应卡片排版，无需媒体查询、JS或固定列数；auto-fit收缩空轨道确保列数随容器宽度自动调整，minmax()保障最小可读宽度与等分布局，配合gap和卡片内flex布局控制内容不溢出、图片不撑破、按钮贴底。
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 就能实现真正自适应的卡片排版，不需要媒体查询、不依赖 JS、也不用算列数——浏览器自己决定每行放几列，且列宽始终等分。
为什么 auto-fit + minmax() 是唯一靠谱写法
写死 repeat(4, 1fr) 或靠 flex-wrap + 百分比宽度，在真实项目里极易崩：小屏压扁文字、图片加载抖动导致重排、Safari 下 margin 合并错位、甚至触发横向滚动。
-
minmax(280px, 1fr)表示“单列至少 280px 宽”，低于该值就自动换行，保证移动端可读性 -
auto-fit会收缩空的网格轨道；auto-fill则保留空轨道，容易在内容少时留白错位 - IE11 不支持，但市占率已低于 0.03%，除非明确要求兼容，否则不用降级
- 别在媒体查询里重写整套
display: grid，只需改minmax()的第一个参数（比如平板用320px）
gap 必须代替 margin 控制卡片间距
用 margin 给卡片加外边距，会导致外边距合并、末尾多出多余间隙、Grid 轨道计算错乱——尤其动态插入卡片时更明显。
- 统一用
gap: 1.5rem同时控制行距和列距，不触发 margin collapse - 删掉所有
.card { margin: 0.5rem }类型的规则，否则实际间距翻倍 - Safari 14.1 以下不支持
gap，可用grid-column-gap/grid-row-gap替代（仅限必要场景）
卡片内部怎么让文字不溢出、图片不撑破、按钮贴底
Grid 只管列数，单张卡片高度不一致会破坏视觉节奏。必须用 Flex 二次控制内部结构，而不是靠 position: absolute 或固定 height。
.card { display: flex; flex-direction: column; height: 100% }-
.card-body { flex-grow: 1 }让描述区域吸满剩余空间 -
.card-footer { margin-top: auto }把按钮永远推到底部 - 图片容器加
overflow: hidden，img设width: 100%; object-fit: cover; aspect-ratio: 16/9，防抖动重排 - 长标题或描述用
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;，比text-overflow: ellipsis更可靠
object-fit 的图片或一段没截断的文字，就能让整组卡片看起来参差不齐。 
