为何CSS Grid 3列布局需将grid-column-end设为4？

问题背景 #

在以下3列Grid布局的示例中，要让.four的<li>元素跨满3列，必须设置grid-area: 2/1/2/4；如果按照直觉设置为grid-area: 2/1/2/3，元素只会跨2列，这看起来不符合直觉，原因是什么？

示例代码 #

CSS 代码

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  list-style: none;
}

li {
  background: rgba(128, 0, 0, .5);
  border: 1px solid #666;
}

.four {
  grid-area: 2/1/2/4;
}

HTML 代码

<ul>
  <li>Col 1</li>
  <li>Col 2</li>
  <li>Col 3</li>
  <li class="four">Col 4</li>
</ul>

原因解析 #

核心在于Grid布局的线（Grid Lines）计数规则：

• 当你定义了3列的Grid时，布局中会生成4条垂直的列线，编号从1开始依次递增：1（最左侧）、2、3、4（最右侧）。
• Grid元素的占位是从起始线到结束线之间的区域，而非直接对应列的数量。

举个例子：

• 如果设置grid-column-end: 3，元素会占据列线1到列线3之间的区域，也就是第1列和第2列，所以是跨2列。
• 只有设置grid-column-end: 4，元素才会占据列线1到列线4之间的区域，覆盖第1、2、3列的全部宽度，实现跨满3列的效果。

而grid-area的语法是grid-area: <行起始线>/<列起始线>/<行结束线>/<列结束线>，所以这里的4对应的是第3列右侧的那条列线，只有这样才能让元素占满整个3列的宽度。

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