Grid 布局完全支持卡片排列，留白源于 grid-auto-flow: row 的“顺序优先”策略，启用 row dense 并配合弹性轨道（如 repeat(auto-fill, minmax(200px, 1fr)))）和 align-self: start 可提升紧凑性。

Grid 布局本身完全支持卡片排列，所谓“无法实现”通常是因为没用对属性——尤其是当卡片高度不一、出现空白空隙时，问题常出在 grid-auto-flow 默认行为上。开启 dense 模式能显著提升空间利用率，但需配合合理轨道定义和项目尺寸控制。

为什么卡片会留白？默认 auto-flow 是“顺序优先”

Grid 默认使用 grid-auto-flow: row（等价于 row dense 不生效），它按 DOM 顺序逐个放置项目，**跳过已占用的格子，不回头填空**。例如第1行有高卡片占满两行，第2个卡片即使很矮，也会被推到第2行末尾或下一行开头，导致上方留下明显空洞。

• 这是设计使然，不是 bug —— 它保证渲染顺序与文档流一致
• 空隙不是“布局失败”，而是默认策略下的预期表现
• 想填空，必须显式启用 dense 并确保轨道足够灵活

启用 dense 的正确写法与前提条件

grid-auto-flow: row dense 或 column dense 才真正触发“紧凑重排”。但仅加这一句往往不够，还需满足：

• 避免固定行高：用 grid-template-rows: repeat(auto-fill, minmax(200px, 1fr))) 替代 1fr 1fr 等死值，让行高随内容弹性伸缩
• 卡片自身不强制撑高容器：检查 min-height、height: 100% 或 align-items: stretch（Grid 容器默认值）是否把矮卡片拉高了
• 禁用影响定位的属性：如 grid-row-start/end 显式跨行会阻碍 dense 填空，需谨慎使用

一个实用的响应式卡片 Grid 示例

以下代码可直接用于多数卡片列表场景，兼顾语义顺序与视觉紧凑性：

 .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)));
  grid-auto-rows: 1fr;
  grid-auto-flow: row dense;
  gap: 1rem;
 }
 .card {
  /* 关键：避免 stretch 拉高 */
  align-self: start;
  /* 可选：统一图片高度防错位 */
  > img { height: 160px; object-fit: cover; }
 }

注意：grid-auto-rows: 1fr 在 dense 模式下作用有限，更推荐用 minmax() 配合 auto-fill 控制列数，行高由内容自然决定。

dense 的代价与替代思路

dense 虽能填空，但会打乱视觉阅读顺序（DOM 第3个卡片可能显示在第1行右侧）。若内容有强逻辑顺序（如步骤指引），应优先优化卡片高度一致性：

• 给标题/描述加 line-clamp 限制行数
• 用 aspect-ratio 统一图片区域比例
• 考虑 display: grid + grid-template-areas 手动分区，比 dense 更可控

不复杂但容易忽略：dense 是补救手段，而非万能解药；真正的紧凑来自内容约束与轨道设计的协同。