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