本文详解如何仅通过 css grid 属性（无需修改 html 结构）实现无间隙堆叠、顶部对齐的自定义布局，重点解决 item2 与 item3 紧密相邻且整体靠上对齐的问题，并提供可扩展的多行适配方案。
本文详解如何仅通过 css grid 属性（无需修改 html 结构）实现无间隙堆叠、顶部对齐的自定义布局，重点解决 item2 与 item3 紧密相邻且整体靠上对齐的问题，并提供可扩展的多行适配方案。
CSS Grid 的强大之处在于它不仅能定义二维结构，更能通过精细化的轨道（track）控制和间隙（gap）管理，实现高度定制化的视觉排布。在你提供的场景中——两列布局下，左侧 item1 占据两行，右侧 item2 和 item3 希望无缝上下堆叠且整体贴顶对齐——关键并不在于移除 gap（因为 gap 是全局生效的），而在于重构行轨道的分配逻辑，让 item2 和 item3 共享同一行轨道空间，从而天然消除垂直间隙。
✅ 正确解法：用 grid-template-rows + row-gap: 0 替代默认自动行高
默认情况下，display: grid 会为每个显式或隐式生成的网格项自动创建等高行轨道。但你可以完全接管行轨道定义：
.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 无空隙 */
}
这段代码的原理是：
- grid-template-rows: 0fr 1fr 将容器划分为 2 行：第 1 行高度为 0fr（即不占用空间），第 2 行占据全部剩余高度；
- item1 设置了 grid-row: span 2，因此它跨越第 1 行（0 高度）和第 2 行（全高），视觉上表现为从顶部延伸到底部；
- item2 和 item3 默认按源顺序依次放置：item2 占据第 1 行（实际不可见），item3 占据第 2 行——但这会导致错位。
⚠️ 实际需配合显式 grid-row 定位才能精准控制。更健壮的做法是显式指定所有项目的行列位置：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px; /* 推荐使用 column-gap/row-gap 分离控制 */
row-gap: 0;
align-items: start;
/* 两行：第一行放 item2，第二行放 item3；item1 跨两行 */
grid-template-rows: auto auto;
}
.item1 {
grid-column: 1;
grid-row: 1 / -1; /* 从第1行开始，跨到最后一行（即跨2行） */
}
.item2 {
grid-column: 2;
grid-row: 1; /* 显式置于第1行 */
}
.item3 {
grid-column: 2;
grid-row: 2; /* 显式置于第2行 */
}
这样 item2 与 item3 在右侧列中严格上下紧邻，无任何间隙，且因 align-items: start 全局生效，二者均顶部对齐。
? 扩展：支持 N 个右侧项目的动态布局
若后续需添加 item4、item5 等，推荐采用「单列流式 + 显式轨道」策略：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 10px;
row-gap: 0;
align-items: start;
/* 为每个右侧项目预留一行：n 个项目 → n 行 */
grid-template-rows: repeat(3, auto); /* 支持 item2/item3/item4 */
}
.item1 { grid-column: 1; grid-row: 1 / -1; } /* 跨所有行 */
.item2 { grid-column: 2; grid-row: 1; }
.item3 { grid-column: 2; grid-row: 2; }
.item4 { grid-column: 2; grid-row: 3; }
? 提示：repeat(3, auto) 比 0fr 1fr 更语义清晰，且兼容性更好（0fr 在部分旧版浏览器中可能表现异常）。
⚠️ 注意事项与最佳实践
- 不要依赖隐式网格线：当布局逻辑复杂时，始终显式声明 grid-row 和 grid-column，避免源顺序导致的意外换行；
- gap 是简写属性，若只需控制列/行间距，请优先使用 column-gap 和 row-gap，提升可维护性；
- align-items: start 作用于所有项目，确保它们在各自单元格内顶部对齐；如需单个项目差异化对齐（如 item3 居中），可单独设置 align-self: center；
- 若内容高度不可预知，auto 行高比 1fr 更安全；fr 单位适用于等分布局，而非紧凑堆叠。
通过精准控制 grid-template-rows、显式定位及 row-gap: 0 的组合，你完全可以在不改动 HTML 的前提下，用纯 CSS 实现任意复杂度的 Grid 自定义布局——这正是 CSS Grid 作为原生二维布局系统的真正优势所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
