如果你已經對上一篇 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