如果你已经对上一篇 Day27 的属性熟悉，这篇很快就会懂，因为只是加以说明上一篇的缩写方式，一样都是在控制网格项目的范围。

grid-row / grid-column

.container {
    grid-row: <grid-line> [ / <grid-line> ]?
    grid-column: <grid-line> [ / <grid-line> ]?
}
<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
预设：auto

这两个属性的优点，就是可以不用写 start 和 end，直接用 "/" 来区分，前面为起始网格线 start 後面为终点网格线 end。

.container {
    grid-column-start:1;
    grid-column-end:5;
    /*等同於*/
    grid-column: 1 / 5;
}

grid-area

.container {
    grid-area: <grid-line> [ / <grid-line> ]{0,3}
}

grid-area 又再更进一步的把上面的缩写，依序为 grid-row-start / grid-column-start / grid-row-end / grid-column-end，什麽很难记？换个说法好了，想像成 x y 轴，其实就是定义网格上 start x1y1 和 end x2y2 两个点的位置： y1 / x1 / y2 / x2 来决定网格区域；也可以记网格区域的逆时针顺序TRBL的边界（上、左、下、右）。

如果 4 个数值有缺少，则会将终点线 end 的数值直接视为 auto。

资料来源：

• CSS 大全第四版

• CSS grid Layout Module Level 1