最可靠方案是用 auto-fit 配合 minmax(280px, 1fr)，使卡片根据容器宽度自动换行：最小列宽280px，剩余空间均分；小屏下自动变为单列。需确保父容器有明确宽度且卡片不设死宽。
用 grid-template-columns: repeat(auto-fit, minmax(...))) 实现卡片自动换行
直接上最常用也最可靠的方案：auto-fit 配合 minmax() 能让卡片在容器内根据可用宽度自动计算列数，不依赖媒体查询。关键不是“填满”，而是“最小宽度达标时才占一列”。
常见错误是写成 repeat(auto-fill, ...) —— auto-fill 会渲染所有可能的轨道（包括空列），而 auto-fit 会把空轨道合并，真正实现“有多少内容占多少空间”。
-
minmax(280px, 1fr)表示每列至少 280px，剩余空间均分；小屏下 280px 装不下，就自动变成 1 列 - 容器必须有明确宽度（比如
width: 100%或设为max-width），否则grid无法计算可容纳几列 - 卡片本身别设死宽（如
width: 300px），否则会破坏minmax的弹性逻辑
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))));
gap: 1rem;
}
为什么卡片在小屏下还是没堆成一列？检查这三处
多数“不生效”问题出在父容器或卡片自身约束上，和 grid 写法无关。
- 父容器被设了
min-width或固定width（比如width: 1200px），导致它不随视口缩放 - 卡片用了
flex布局又没设flex-wrap: wrap，或者内部子元素撑开了卡片宽度 - 漏写了
box-sizing: border-box，导致padding或border让实际宽度超出minmax下限
auto-fit 和 auto-fill 在真实场景中的表现差异
二者只在“容器剩余空间不足以放下一个完整网格项”时行为不同。日常卡片列表中，这个差异直接影响视觉密度和响应节奏。
立即学习“前端免费学习笔记（深入）”；
-
auto-fit：空轨道被折叠，卡片紧贴左上，右侧留白自然；适合内容不固定、卡片数量常变的场景（如用户动态流） -
auto-fill：保留所有轨道（哪怕为空），卡片间间隙均匀但右侧可能出现大片空白；适合需要严格对齐的画廊类布局 - 性能上无差别，但
auto-fit渲染节点更少，DOM 更干净
配合 @container 做局部容器查询（进阶但实用）
如果卡片组件要嵌在复杂布局里（比如侧边栏+主内容区），全局视口断点会失灵。这时用 @container 让卡片只响应自己容器的宽度变化，更精准。
- 先给卡片外层加
container-type: inline-size - 然后用
@container (min-width: 600px)控制内部grid列数 - 注意目前需 Chrome 110+ / Edge 110+ / Safari 16.4+，Firefox 尚未支持
没有容器查询支持时，老老实实用 auto-fit + 合理的 minmax 下限，已经覆盖 95% 的业务需求。过度依赖 JS 计算列数或手写多套媒体查询，反而增加维护成本。
