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 是补救手段，而非万能解药；真正的紧凑来自内容约束与轨道设计的协同。
