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