CSS Grid 的 grid-row 属性基于网格线（grid lines）而非行数，误将“6 行”理解为 1/6 会导致最后一行缺失，引发列内瓦片高度错位；正确应使用 1/7 等跨线值对齐所有列。
css grid 的 `grid-row` 属性基于**网格线（grid lines）**而非行数，误将“6 行”理解为 `1/6` 会导致最后一行缺失，引发列内瓦片高度错位；正确应使用 `1/7` 等跨线值对齐所有列。
在使用 CSS Grid 布局时，一个常见却容易被忽视的误区是混淆「网格行数」与「网格线编号」。Grid 容器中若有 n 行，则实际存在 n + 1 条水平网格线（从顶部第 1 条线到最底部第 n+1 条线）。因此，要让一个元素跨越全部 6 行，其 grid-row 必须写为 1 / 7（即从第 1 条线开始，到第 7 条线结束），而非 1 / 6——后者仅覆盖前 5 行，造成底部留空、高度塌陷。
以你的代码为例，.item:first-child 设置为 grid-row: 1/6，实际只占用了 5 行空间（线 1→线 6），而其余列中 .item:nth-child(3) 和 .item:nth-child(6) 分别终止于线 6，导致它们无法与首列底部对齐，视觉上出现“高度不均”。
✅ 正确的行线映射关系如下（假设整体高度划分为 6 行 → 共 7 条水平线）：
| 列 | 瓦片 | 原错误 grid-row | 修正后 grid-row | 覆盖行数 |
|---|---|---|---|---|
| 第1列 | Плитка 1 | 1/6 | 1/7 | ✅ 全 6 行 |
| 第2列 | Плитка 2 | 1/3 | 1/4 | ✅ 前 3 行（线1→线4） |
| Плитка 3 | 3/6 | 4/7 | ✅ 后 3 行（线4→线7） | |
| 第3列 | Плитка 4 | 1/2 | 1/3 | ✅ 第1行 |
| Плитка 5 | 2/4 | 3/5 | ✅ 第2–3行 | |
| Плитка 6 | 4/6 | 5/7 | ✅ 第4–6行 |
? 关键修正后的 CSS 片段：
.box {
width: 750px;
height: 360px;
display: grid;
grid-template-columns: 44% 32% 24%;
/* 推荐显式定义行高，增强可控性 */
grid-template-rows: repeat(6, 1fr); /* 或具体 px 值，如 60px */
}
.item {
background: #b3b3b3;
border: 1px solid #000;
color: #fff;
padding: 15px;
}
.item:first-child { grid-row: 1 / 7; } /* ✅ 跨全部6行 */
.item:nth-child(2) { grid-row: 1 / 4; background: #898995; }
.item:nth-child(3) { grid-row: 4 / 7; background: #898995; }
.item:nth-child(4) { grid-row: 1 / 3; background: #7a7a7a; }
.item:nth-child(5) { grid-row: 3 / 5; background: #7a7a7a; }
.item:nth-child(6) { grid-row: 5 / 7; background: #7a7a7a; }
? 额外建议：
- 使用 grid-template-rows: repeat(6, 1fr) 显式声明 6 行等高分布，避免浏览器按内容自动计算行高带来的偏差；
- 若需响应式适配，可配合 minmax() 或 auto-fit 动态调整；
- 在开发中启用浏览器开发者工具的「Layout」面板（如 Chrome 的 “Show grid areas”），直观查看网格线位置，快速验证 grid-row 是否准确。
只要牢记 “n 行 ↔ n+1 条线” 这一核心规则，并统一以网格线为锚点进行布局，就能彻底解决瓦片高度参差、列底不对齐等典型 Grid 对齐问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
