web前端入门到实战：CSS 网格布局：网格线

本系列第一篇讲到如何创建网格容器，以及在容器元素上能够使用的属性。网格格式化上下文一旦创建，你也就有了网格线了。有了网格线，你就能在网格项目上添加属性，对项目做定位（place items）了。

读完本篇文章，你将学到：

• 定位属性：grid-column-start、grid-column-end、grid-row-start、grid-row-end 以及对应的简写属性 grid-column 和 grid-row。
• 如何使用行号（line number）设置 grid-area 属性。
• 如何根据命名网格线（line name）定位项目。
• 在定位项目时，显式网格和隐式网格上的表现有何不同。
• 使用 span 关键字，再讲一点福利内容 subgrid。
• 当混合使用自动布局（auto-placed）和确定布局（placed）定位项目时，需要注意些什么。

网格线定位

在网格中定位一个项目时，需要先设置它从哪根线开始，到哪儿根线结束。举个例子，我要在一个 5x5 的网格中定位一个项目，让它占据第二列和第三列，第一行到第三行。我会使用下面的 CSS 代码（注意，这里使用的是网格线，而非网格轨道）。

专门建立的学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
.item {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 4;
}

上面的代码还可以简写为以下形式：斜线之前表示起始线（start line），斜线之后表示终止线（end line）。

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 4;
}

效果：

注意，虽然 .item 的内容很少，但还是占满了整个定位区域。这是因为项目上的对齐属性 align-self 和 justify-self 的默认值为 stretch。

如果项目只需跨越一个轨道，那么可以忽略设置终止线，因为项目默认就跨域一个轨道。举个例子，设置一个只占据第二列的项目。之前会这么写：

.item {
  grid-column: 2 / 3;
}

其实可以简写成这样的：

.item {
  grid-column: 2;
}

grid-area 属性定位

我们还能用 grid-area 属性定位项目。下一篇文章会全面讲它的用法，不过现在我们只讲使用行号来设置它的方式：

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

grid-area 属性行号的设置顺序是这样的：grid-row-start、grid-column-start、grid-row-end、grid-column-end。如果你是在水平、从左到右的语言环境下开发的（比如英语），那么这几个分别对应的方向是 top、left、bottom 和 right——跟设置 margin 的方向是相反的——逆时针。

这种设置网格线的方式是为了能适配不同的书写模式（下面会介绍）——先设置起始端，在设置结束端，这与代表物理方向的 top、left… 是不同的。当然，上面这种设置项目位置的方式我不会用，还是会使用 grid-column 和 grid-row 这两个简写属性，因为它们的可读性更高。

显式网格中的网格线

在一个网格容器中，使用 grid-template-columns 或 grid-template-rows 设置的那部分网格区域称为 显式网格。在定义显式区域的同时，还会定义网格线。

这些网格线会编号，起始值是 1，在行内和块方向两个维度上编号。对水平书写模式、从左向右排版的语言来说：行内方向（inline d