網格佈局。

Grid 是常見的排版方式之一，是在 Flex 之後出來的，Flex 是針對單一方向的排版，而 Grid 則是針對雙向進行排版。

本文將逐步解析，分為以下兩大部分：

外容器屬性：

1. display

   • grid
   • inline-grid

2. grid-template-columns || grid-template-rows

3. grid-auto-columns || grid-auto-rows

4. grid-template-areas

5. grid-auto-flow

6. grid-gap || grid-column-gap || grid-row-gap

內元件屬性：

1. grid-column-start || grid-row-start
2. grid-column-end || grid-row-end
3. grid-column || grid-row
4. grid-area

外容器屬性：

1. display：grid與inline-grid差別在於兩個 grid container 之間需不需要換行。

2. grid-template-columns || grid-template-rows：定義行 || 列的數量。

   .container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr; //此容器共有3行
     grid-template-rows: 1fr 1fr; //此容器共有2列
   }
   

3. grid-auto-columns || grid-auto-rows：定義行高 || 列高。

4. grid-template-areas：分配所有網格的空間，需配合內元件的命名使用。

   .container {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 1fr 1fr 1fr;
     grid-template-areas:
       'header header header'
       'main main sidebar'
       'footer footer sidebar';
   }
   

5. grid-auto-flow：定義行 || 列的排列方式。

6. grid-gap || grid-column-gap || grid-row-gap：定義行 || 列的間隔寬度。

內元件屬性：

1. grid-column-start || grid-row-start：定義每個元件起始於第幾行 || 列的線。
2. grid-column-end || grid-row-end：定義每個元件結束於第幾行 || 列的線。
3. grid-column || grid-row：1.與 2.的融合，起始與結束的屬性值以 / 號區隔。
4. grid-area：定義對應外容器grid-template-areas的名稱。