CSS Grid 自定义布局：精确控制行高与项目对齐（无需修改 HTML）

本文详解如何仅通过 CSS 实现 Grid 布局中的精细垂直对齐——特别是让多个项目紧贴顶部排列、消除意外间距，且不改动 HTML 结构。核心在于合理设置 grid-template-rows 和 row-gap，配合 align-items: start 精准控制容器内项目在行方向上的位置。

本文详解如何仅通过 CSS 实现 Grid 布局中的精细垂直对齐——特别是让多个项目紧贴顶部排列、消除意外间距，且不改动 HTML 结构。核心在于合理设置 `grid-template-rows` 和 `row-gap`，配合 `align-items: start` 精准控制容器内项目在行方向上的位置。

CSS Grid 的强大之处不仅在于定义行列结构，更在于其对空间分配与项目定位的细粒度控制。在你提供的两列布局中，.item1 占据两行（grid-row: span 2），而 .item2 和 .item3 各占一行，但默认情况下它们仍会按隐式网格轨道高度均匀分布，导致中间出现非预期空隙。关键问题在于：Grid 容器的隐式行高由内容撑开，而 gap 会作用于所有行之间，包括 .item2 与 .item3 所在的相邻行。

✅ 正确解法是显式定义行轨道，并将首行高度设为 0fr（即不占用可视空间），从而让 .item2 和 .item3 被“压缩”到同一视觉行区域，再通过 row-gap: 0 彻底消除它们之间的间隙：

.grid-container {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 10px;                /* 保留列间距（即左右间隙） */  align-items: start;       /* 所有项目顶部对齐其所在单元格 */  grid-template-rows: 0fr 1fr; /* 第一行高度为 0，第二行占据剩余全部空间 */  row-gap: 0;               /* 强制关闭行间间隙，确保 item2/item3 紧邻 */}

此时，.item1 的 grid-row: span 2 将跨越第 1 行（0fr）和第 2 行（1fr），视觉上仍保持原有高度；而 .item2 和 .item3 默认被放置在第 1 行（因未指定 grid-row，按源顺序自动填入第一可用轨道），由于该行高度为 0fr，它们会自然“上浮”至容器顶部，并共享同一行空间——最终实现顶部对齐且零间距的效果。

立即学习“前端免费学习笔记（深入）”；

? 扩展场景适配：
若后续需添加 .item4，只需同步扩展行定义与项目跨度：

.grid-container {  /* ... 其他属性保持不变 */  grid-template-rows: 0fr 0fr 1fr; /* N 个并排项 → N-1 个 0fr + 1 个 1fr */  row-gap: 0;}.item1 { grid-row: span 3; } /* 跨越全部 3 行 */.item2, .item3, .item4 { grid-row: span 1; }

⚠️ 注意事项：

• 0fr 并非“无效值”，而是合法的弹性单位，表示该行不参与剩余空间分配，高度由内容或 min-height 决定（此处内容为空，故为 0）；
• align-items: start 是必需的，否则项目可能因默认 stretch 而拉伸填充整个单元格高度；
• 避免混用 gap 与 row-gap/column-gap —— 当仅需控制行间距时，优先使用 row-gap: 0 显式覆盖，语义更清晰；
• 若项目内容高度差异大，建议为 .item2/.item3 添加 align-self: start 进一步强化顶部对齐，避免受父级 align-items 继承影响。

? 进阶提示：对于动态数量的并排项（如列表渲染），纯 CSS Grid 难以全自动适配 0fr 行数。此时可考虑结合 display: contents（隐藏容器但保留子项网格上下文）或转向 Flexbox（更适合一维流式排列）。但对固定结构的定制化布局，上述 0fr + row-gap: 0 方案简洁、可靠、完全符合现代 CSS 规范，是无需 JS 或 HTML 改动的理想解。