用 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