为何第三个block未像其他块一样对齐CSS Grid边框？

你的问题核心是网格线编号使用错误：你定义了3列网格（repeat(3, 1fr)），对应的网格线编号是1、2、3、4（n列对应n+1条网格线），但你在grid-column中使用了/ 6这类超出实际范围的编号，浏览器会自动生成额外的空列，导致第三个区块无法对齐容器边框。

以下是修正后的完整代码：

CSS代码 #

.field-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* 可选：添加边框和间距方便观察布局 */
  border: 1px solid #000;
  gap: 4px;
  height: 300px; /* 给容器固定高度，便于查看效果 */
}

.field-6 .block {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.field-6 .block:nth-child(1) {
  grid-column: 1 / 4; /* 横跨全部3列，对应网格线1到4 */
  background: #888;
}

.field-6 .block:nth-child(2) {
  grid-column: 1 / 3; /* 占前2列，网格线1到3 */
  background: #666;
}

.field-6 .block:nth-child(3) {
  grid-column: 3 / 4; /* 占第3列，网格线3到4，刚好对齐容器右边框 */
  background: #444;
}

.field-6 .block:nth-child(4) {
  grid-column: 1 / 2; /* 占第1列，网格线1到2 */
  background: #222;
}

.field-6 .block:nth-child(5) {
  grid-column: 2 / 4; /* 占后2列，网格线2到4 */
  background: #000;
}

HTML代码 #

<div class="field-6">
  <div class="block">1</div>
  <div class="block">2</div>
  <div class="block">3</div>
  <div class="block">4</div>
  <div class="block">5</div>
</div>

关键修正说明：

• 所有grid-column的结束值都调整为3列网格的有效编号（最大为4），避免浏览器自动生成多余列。
• 第三个区块使用grid-column: 3 / 4，精准对应第3列的范围，完美对齐容器右边框。

内容的提问来源于stack exchange，提问作者Enhance