Grid Items 網格項目 主要屬性

有幾種方式能夠將網格項目附加到網格上面，以下是四個將元素附加到網格線的簡單屬性介紹：

grid-column-start 以及 grid-column-end屬性

grid-column-start 用來指定網格項目在網格欄（grid column）中的起始位置。這個起始位置定義了該網格區塊在區塊軸（block axis）方向上的開始邊緣。
反之，
grid-column-end 則是指定欄的終點位置，指定元素在哪一個 欄線（column line） 結束（不包含此線）。

這個位置可以透過指定「線（line）」、「跨度（span）」，或是「自動（automatic）」來設定。

grid-column 屬性

grid-column 屬性為速寫（shorthand）屬性，是 grid-column-start 和 grid-column-end 的簡寫，用來控制網格項目在column軸上的跨度與位置。

grid-column: <start-line> / <end-line>;

grid-row-start 以及 grid-row-end 屬性

grid-row-start 用來指定網格項目在網格列（grid row）中的起始位置，或者說在哪條行線（row line）開始。
這個起始位置定義了該網格區塊在行內起始邊緣。
反之，
grid-row-end 則是指定列的終點位置，定義了該網格區塊在行內結尾邊緣。指定元素在哪一條 行線（row line） 結束（不包含此線）。

這個位置可以透過指定「線（line）」、「跨度（span）」，或是「自動（automatic）」來設定。

grid-row 屬性

grid-row 屬性為速寫屬性，是 grid-row-start 和 grid-row-end 的簡寫。

grid-row: <start-line> / <end-line>;

grid-area

使用方式一：

grid-area 屬性用來精確地指定一個元素應該佔據網格中的哪些行和哪些列，藉由指定網格項目的大小和在網格中的位置，從而指定其網格區域的邊緣。

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

使用方式二：

grid-area 和 grid-template-areas 搭配使用，可以直接指定區域名稱。
舉例來說：

.grid-container {
    grid-template-areas:
        "header header header"
        "sidebar content ads";
}

這裡定義了一個 3 欄、2 列的網格，每一格都用命名的方式標記出來會劃分成這樣，

在 grid-area 在網格項目上設定，則指定 每個區塊（item） 要放在對應名字的區域。

/* 每項目假設background顏色不同 */
.header {
  grid-area: header;
  background: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background: lightgreen;
}

.content {
  grid-area: content;
  background: lightgray;
}

.ads {
  grid-area: ads;
  background: lightcoral;
}

這時候就可在 grid-area 所在項目裡加入細節設計(例如：background)。

參考資料

書<CSS大全第四版>
Mdn : grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area