本文详解如何仅用 CSS 实现 Grid 容器内指定项目（如 item2 与 item3）顶部对齐且零间距排布，无需修改 HTML 结构，核心在于合理设置 grid-template-rows 和 row-gap。
本文详解如何仅用 css 实现 grid 容器内指定项目（如 item2 与 item3）顶部对齐且零间距排布，无需修改 html 结构，核心在于合理设置 `grid-template-rows` 和 `row-gap`。
在 CSS Grid 布局中，实现「item2 与 item3 紧密相邻、共同顶对齐容器」的需求，关键不在于隐藏边距或覆盖默认行为，而在于主动定义网格轨道的尺寸逻辑——尤其是行轨道（row tracks）的分配方式。
默认情况下，当使用 grid-template-columns: 1fr 1fr 且未显式声明 grid-template-rows 时，浏览器会采用 grid-auto-rows: auto 行为，即每行高度由内容撑开，且 gap（含 row-gap）会均匀作用于所有行间。这正是导致 item2 与 item3 之间出现意外垂直间隙的根本原因。
✅ 正确解法：用 grid-template-rows 显式声明行高比例，并将无关行设为 0fr
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px; /* 保留列间距（水平 gap） */
align-items: start; /* 所有项目顶部对齐单元格 */
grid-template-rows: 0fr 1fr; /* 第一行高度为 0（不占空间），第二行占据全部剩余高度 */
row-gap: 0; /* 强制行间距为 0，彻底消除 item2/item3 间空隙 */
}
? 原理解析：
- 0fr 并非无效值，而是合法的网格轨道尺寸单位，表示该行不分配任何剩余空间（即高度为 0），但依然存在逻辑行线（grid line），允许项目跨越其定位；
- .item1 { grid-row: span 2 } 将跨过第 1 行（0fr）和第 2 行（1fr），视觉上仍占据完整两行高度；
- .item2 和 .item3 默认按自动流（grid-auto-flow）填入第 1 行第 2 列、第 2 行第 2 列 —— 但由于第 1 行高度为 0，它们实际渲染位置被“挤压”至第 2 行起始处，形成顶部紧邻效果；
- row-gap: 0 确保即使未来增加更多行，行间也无额外空白。
? 进阶适配：支持动态项目数
若后续需加入 .item4，只需同步扩展行定义与跨度：
.grid-container {
/* ...其他属性保持不变... */
grid-template-rows: 0fr 0fr 1fr; /* N-1 行设为 0fr，最后一行占满 */
row-gap: 0;
}
.item1 { grid-row: span 3; } /* 跨越全部三行 */
.item2, .item3, .item4 { grid-row: span 1; }
⚠️ 注意事项：
- 0fr 在所有现代浏览器（Chrome 66+、Firefox 61+、Safari 16.4+、Edge 79+）中完全支持，无需前缀；
- 避免滥用 0fr 于内容依赖高度的场景（如含 min-height 或 flex: 1 的子元素），可能引发不可见溢出；
- 若布局逻辑复杂度持续上升（如频繁增删项目、需动态重排），建议评估是否更适合 Flexbox 的一维流式管理，或结合 grid-template-areas 使用语义化区域命名提升可维护性。
掌握 grid-template-rows 的显式控制能力，是解锁 CSS Grid 精准定制布局的关键一步——它让开发者从“被动适应内容”转向“主动规划空间”，真正实现二维布局的声明式表达。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
