下面我们试着可以设置一下 壹 这个网格项目的位置。把它放在 1 号栏线到 4 号栏线之间。回到编辑器，先修改一下这个网格，把 grid-template-column 的值，设置成 repeat ，重复的次数是 3， 1fr。这样我们就得到了一个三栏三行的网格。

在 壹 这个网格项目的容器上面，有一个 item__1 这个类，我们可以使用这个类的名字作为样式的选择器，在这个容器上设置点样式。

设置一下 .item__1 的样式，这里可以用一下 grid-column-start 属性，把它的值设置成 1，意思就是，让这个网格项目，从 1 号栏线开始，下面再用一个 grid-column-end 属性，设置一下结束的位置，结束位置的栏线编号设置成 4 。

现在你会发现，壹 这个网格项目的变化，它的位置是从 1 号栏线开始的，位置结束的栏线编号是 4。

下面我们可以再设置一下这个网格项目的行的位置，从 1 号行线开始，到 3 号行线结束。 设置一下 .item__1 这个类的样式。设置一下 grid-row-start 这个属性，把这个项目的行线的开始位置设置成 1， 下面再用一个 grid-row-end，结束的行线的位置设置成 3 。

保存一下文件，然后观察一下 壹 这个网格项目的位置。 这里我们再把这个 grid-row-start 属性的值设置成 2 ，这样这个项目的行线会从 2 号线开始。 所以你会发现，这个项目就跑到 二，三，四这几个项目的下面来了。

恢复一下，让 grid-row-start 属性的值等于 1 。

下面我们再设置一下 二 这个项目的位置，这个项目的容器上面有个 item__2 这个 css 类，可以用它作为样式的选择器。

这里我们用 grid-row-start 设置一下项目的行线开始位置，可以设置成 3，这个位置应该就是这个项目现在的行线开始的位置。然后再用 grid-row-end 设置一下它的结束位置的行线编号，比如把它设置成 5 。 在没设置这个属性之前，它的结束位置的行线编号应该是 4。

保存一下，然后观察 二 这个网格项目位置的变化。 现在它的开始行线编号是 3，结束行线编号是 5 。