核心是用 auto-fit 配合 minmax(280px, 1fr) 实现列数自适应：每列最小280px、最大均分剩余空间；auto-fit 动态压缩空轨道，视觉更紧凑；需设 display: grid、避免固定卡片宽高、慎用 line-clamp、断点仅调 minmax 第一参数，注意 gap 被 overflow: hidden 隐藏的常见问题。
用
控制列数自适应
核心是让每张卡片有最小宽度（比如
），同时容器能尽可能塞下更多列，不出现“最后一列只占一半”的尴尬。关键不是写死列数，而是告诉 Grid：“每个格子至少要
，能塞几个就塞几个”。
表示：每个轨道最小
，最大可伸展到均分剩余空间
会提前生成足够多的列轨道（即使没内容），保证缩放时能立刻响应；换成
会在空轨道被压缩掉后重新分配空间，视觉上更紧凑——多数卡片场景推荐
必须给父容器设
，且不能依赖
就完事——如果父容器本身没约束（比如没设
或外层 flex 布局干扰），网格可能撑破视口
卡片自身别用固定宽高，靠 padding + max-width 控制呼吸感
很多人给
写
或
，结果在小屏上溢出或留白难看。卡片应该“随轨道伸缩”，但要有边界感。
去掉
和
，改用
防止撑破轨道
用
替代固定尺寸留白，比如
，再配合
图片用
，避免拉伸变形
文字行数不确定时，慎用
—— 它在 Safari 旧版本里需要
前缀，且可能截断不一致
响应式断点不是必须加，但得知道什么时候该加
本身就能应对大多数缩放场景，但真遇到设计要求（比如“
平板
横屏最多 3 列”“手机必须单列”），就得补断点。这时候别改
的整个结构，只调
的第一个参数。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
小屏（
）：把
改成
，强制单列
中屏（
）：用
，保证两列不挤
大屏再往上，通常不需要额外断点——
在桌面端自然变成 3–4 列，取决于容器宽度
注意：媒体查询里的
参数必须是长度单位或百分比，不能是
或
（部分
浏览器
解析不稳定）
常见错觉：gap 没生效？其实是被父容器
overflow
隐藏了
写了
却看不到间距，十有八九是父容器设置了
或者外层用了
且没设
，导致网格整体被裁剪。另外，
不作用于网格项的 margin，所以别在卡片上再加
，否则会叠加。
立即学习
“
前端免费学习笔记（深入）
”；
检查父容器是否意外带了
（尤其从 UI 框架继承的类名）
确认没有在外层
上同时用
和
—— 后者会覆盖前者，但开发者工具里可能误判布局来源
在 Firefox 旧版本（margin 模拟，但必须配合
排除最后一行/列的多余边距
真正卡住人的往往不是语法写不对，而是卡片内容高度不一致导致网格行高塌陷、或者忘了给图片设
导致拉伸变形——这些细节比 Grid 属性本身更影响最终效果。
grid-template-columns: repeat(auto-fill, minmax(...))280px280pxminmax(280px, 1fr)280pxauto-fillauto-fitauto-fitdisplay: gridwidth: 100%max-width.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}.cardwidth: 300pxheight: 400pxwidthheightmax-width: 100%paddingpadding: 1.25rembox-sizing: border-boximg { width: 100%; height: auto; display: block; }line-clamp-webkit-auto-fit + minmaxgrid-template-columnsminmax()max-width: 480pxminmax(280px, 1fr)minmax(100%, 1fr)481px – 768pxminmax(320px, 1fr)minmax(280px, 1fr)minmax()emrem@media (max-width: 480px) {
.card-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.card-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
}gap: 1.5removerflow: hiddenflexflex-wrap: wrapgapmarginoverflow: hiddendivdisplay: flexdisplay: gridgap:not(:last-child)height: auto