核心是用 auto-fit 与 minmax() 配合实现列数自适应：auto-fit 会收缩空列，避免卡片压扁；minmax(280px,1fr) 设定列宽范围；gap 统一控制间距，比 margin 更可靠。
用 grid-template-columns: repeat(auto-fit, minmax(...))) 实现自动列数调整
核心是让浏览器根据容器宽度，自动算出能放几列卡片，而不是写死列数。关键不在 auto-fit 本身，而在它和 minmax() 搭配时的行为：当剩余空间不够一个 minmax() 单元时，整列会被“收走”，避免出现被撑变形的窄列。
常见错误是写成 repeat(auto-fill, ...) —— 它会强行铺满所有可用空间，哪怕最后一列只剩 1px 宽，卡片也会被压扁；而 auto-fit 会收缩掉空列，真正实现“够宽才显示”。
-
minmax(280px, 1fr)表示每列最小 280px，最大均分剩余空间；手机竖屏下只显示 1 列，平板横屏变 2 列，桌面自然到 3–4 列 - 别把
minmax()的最小值设得太小（比如150px），否则在中等宽度下可能意外多出一列，导致卡片内容换行混乱 - 如果卡片内有固定宽高比的图片或视频，记得给容器加
aspect-ratio或用padding-top技巧兜底，否则1fr分配可能让高度塌陷
卡片间距用 gap，别用 margin
gap 是 Grid 布局原生属性，它只作用于网格项之间，不会影响外边距或触发父容器滚动条；而用 margin 给每个卡片加间隔，容易在网格边缘多出半倍间距，还得额外写负边距或 :first-child 等选择器来修正。
- 直接写
gap: 1.5rem，所有行列间隙统一控制，响应式时也无需重复 media query - 如果设计稿要求“第一行顶部无 gap、最后一行底部无 gap”，
gap无法做到——这时说明你其实不该用 Grid，该换 Flex + wrapping 或 JS 计算 - 旧版 Safari（gap 在 Grid 中生效，需加
-webkit-gap前缀，但仅限 iOS 16.4 以下或 macOS Monterey
响应断点少写 media query，靠 Grid 自适应扛住大部分情况
多数场景下，单靠 auto-fit + minmax() 就能覆盖从 320px 到 2560px 的设备宽度，不需要为每种设备宽度都写一遍 @media。只有当卡片内容结构发生质变（比如标题从一行变两行、按钮位置重排）时，才值得加断点。
- 例如：宽度 0.875rem，图标变小，这是内容级适配，和布局无关
- 错误做法：为 “iPad 竖屏” 单独写
@media (min-width: 768px)改列数——此时minmax(280px, 1fr)已经让 Grid 自动变成 2 列了 - 真要加断点，优先改
minmax()的最小值，比如桌面端提至320px，比新增一套 grid 模板更轻量
卡片内容不撑开网格项？检查 align-items 和 min-height
Grid 默认 align-items: stretch，但一旦卡片里有 flex、position: absolute 或图片未设 height，就可能导致高度计算失效，相邻卡片高度不一致，视觉上错乱。
- 加
align-items: start可让所有卡片顶部对齐，避免被最长卡片拉高；但需确认设计是否允许高度不一致 - 更稳妥的是给卡片加
min-height: 200px（按实际内容预估），再配合display: flex; flex-direction: column控制内部元素顺序 - 若卡片含懒加载图片，首次渲染时高度为 0，会引发布局抖动——必须提前设置
aspect-ratio或height占位
grid 重计算，或者换用 JS 驱动的布局方案。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
