CSS Grid 行线索引详解：修复不均匀瓷砖高度问题-html教程-PHP中文网

CSS Grid 行线索引详解：修复不均匀瓷砖高度问题

本文解析 CSS Grid 中 grid-row 属性的行线（row line）计数逻辑，指出因误用行号范围导致网格项高度不一致的根本原因，并提供修正后的完整代码与实践建议。

本文解析 css grid 中 `grid-row` 属性的行线（row line）计数逻辑，指出因误用行号范围导致网格项高度不一致的根本原因，并提供修正后的完整代码与实践建议。

在使用 CSS Grid 布局时，grid-row: start/end 并非指定“跨越几行”，而是明确指定起始和结束的行线编号（row line number）。一个包含 n 个网格行（track）的容器，其内部共有 n + 1 条水平行线（从顶部第 1 条线到最底部第 n+1 条线）。例如，若你希望第一列整体占据全部 6 行内容区域，则该列应跨越从第 1 条行线到第 7 条行线（即 grid-row: 1 / 7），而非 1 / 6——后者实际只覆盖前 5 行，造成后续列计算错位。

原代码中 .item:first-child { grid-row: 1/6; } 仅占 5 行高度，导致整个网格隐式行高基准偏移；而第二、三列各子项的 1/3、3/6 等写法也因总行线数未统一为 7 而产生高度参差。正确做法是：先确定总行线数（此处为 7），再按逻辑分区分配行线范围。

以下是修正后的完整样式（关键修改已加注释）：

FreeGen

一款AI图像与设计工具，主要用于免费的AI文生图片工具，不受限、没token压力，适合需要提升相关任务效率的用户。

下载

.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;
}

/* 第二列：上半部（行线1→4）、下半部（行线4→7） */
.item:nth-child(2) {
  background: #898995;
  grid-row: 1 / 4;
}
.item:nth-child(3) {
  background: #898995;
  grid-row: 4 / 7;
}

/* 第三列：三等分，每段占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;
}

✅ 关键注意事项：