用 grid 布局实现卡片墙自动换行的核心是 repeat(auto-fill, minmax(280px, 1fr)))，其中 auto-fill 预留空轨道便于 JS 动态填充，minmax 确保每列最小 280px、最大均分空间，配合 width: 100% 和 gap 即可实现响应式、自适应、无需媒体查询的弹性布局。
用 grid 布局实现卡片墙自动换行，核心是 repeat(auto-fill, minmax(最小宽度, 1fr))) —— 它能根据容器宽度动态计算列数，不依赖媒体查询，响应自然。
auto-fill + minmax 是怎么工作的
auto-fill 会让网格尽可能多地“填满”可用空间，即使某列没内容也会预留位置（后续可被 JS 动态填充）；minmax(280px, 1fr) 表示：每列最小 280px，最大均分剩余空间。当容器变窄，放不下两列时，自动变成单列。
- 用
auto-fill而不是auto-fit：前者保留空轨道（适合 JS 异步加载卡片），后者会收缩空列、合并空白 -
minmax()第二个参数写1fr才能真正均分，写max-content或固定值会破坏弹性 - 记得给卡片设
width: 100%，避免内容撑破网格项
基础代码结构
只需几行 CSS 就能驱动整个布局：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)));
gap: 16px;
}
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
width: 100%;
}
容器无需设置高度，卡片高度可不一致，网格会自动对齐顶部（如需底部对齐，加 align-items: end）。
立即学习“前端免费学习笔记（深入）”；
适配移动端与间隙控制
小屏下 280px 可能仍偏宽，可配合 @container（如有 container query 支持）或降级为 flex + flex-wrap，但更轻量的做法是直接调小 minmax 的最小值：
- 桌面端常用
minmax(320px, 1fr) - 平板可用
minmax(260px, 1fr) - 手机建议不小于
220px，再小会影响可读性 -
gap推荐用rem或em，随字体缩放更协调
常见问题处理
如果卡片出现错位或换行异常，优先检查这几项：
- 父容器是否设置了
width或max-width？若为fit-content，grid 无法计算可用空间 - 卡片内部是否有
float、position: absolute破坏文档流？会导致高度塌陷 - 是否忘了重置卡片的
margin？尤其图片默认有下方空白 - 需要等比例缩放卡片（如 16:9）？用
aspect-ratio: 16/9替代 padding hack
