本文详解 CSS Grid 布局中 grid-row 行线编号原理，指出因误用行号范围（如 1/6）导致网格项高度错位的根本原因，并提供正确计算方法与可复用的修正方案。
本文详解 css grid 布局中 `grid-row` 行线编号原理，指出因误用行号范围（如 `1/6`）导致网格项高度错位的根本原因，并提供正确计算方法与可复用的修正方案。
在 CSS Grid 中，grid-row: start / end 并非指定“跨越几行”，而是明确声明起始行线（start line）和结束行线（end line）的索引值。行线（grid lines）是隐式存在于网格容器中的分隔线——一个由 n 行组成的网格，实际拥有 n + 1 条水平行线（从顶部第 1 条到最底部第 n+1 条）。因此，若希望某元素纵向跨越全部 6 行，其 grid-row 应设为 1 / 7，而非 1 / 6。
原代码中 .item:first-child { grid-row: 1/6; } 仅覆盖前 5 行（行线 1 → 行线 6），导致该元素高度不足；同理，.item:nth-child(3) { grid-row: 3/6; } 实际只占 3 行（行线 3 → 行线 6），而右侧列 .item:nth-child(5) 使用 2/4 跨越 2 行，但未与同列其他项对齐行线基准，最终引发视觉上的高度参差。
✅ 正确做法是统一以 7 条行线（对应 6 行高度空间）为基准，按列逻辑重新分配：
.box {
width: 750px;
height: 360px;
display: grid;
grid-template-columns: 44% 32% 24%;
/* 可选：显式定义行高，增强可控性 */
grid-template-rows: repeat(6, 1fr); /* 或使用固定值如 60px */
}
.item {
background: #b3b3b3;
border: 1px solid #000;
color: #fff;
padding: 15px;
}
/* 左列：单个大项，占满全部6行 → 行线 1 到 7 */
.item:first-child {
grid-row: 1 / 7;
}
/* 中列：两项，上半部占2行（1→3），下半部占4行（3→7） */
.item:nth-child(2) {
background: #898995;
grid-row: 1 / 3;
}
.item:nth-child(3) {
background: #898995;
grid-row: 3 / 7;
}
/* 右列：三项，等分6行 → 每项占2行：1→3、3→5、5→7 */
.item:nth-child(4) {
background: #7a7a7a;
grid-row: 1 / 3;
}
.item:nth-child(5) {
background: #7a7a7a;
grid-row: 3 / 5;
}
.item:nth-child(6) {
background: #7a7a7a;
grid-row: 5 / 7;
}? 关键提醒：
立即学习“前端免费学习笔记（深入）”；
- 行线编号始终从 1 开始（非 0），且 end 值必须大于 start；
- 若未显式设置 grid-template-rows，浏览器将基于内容自动分配行高，加剧不一致——强烈建议添加 grid-template-rows: repeat(6, 1fr) 或具体像素值；
- 使用 grid-auto-rows 仅影响隐式网格，无法修正显式定位错误；
- 调试时可在开发者工具中启用“CSS Grid overlay”，直观查看行线位置。
通过严格遵循行线索引规则并配合显式行定义，即可彻底解决网格项纵向高度不均的问题，实现精准、稳定、可维护的布局结构。
