grid 縮寫

grid 提供了一個最簡單的縮寫，讓許多屬性可以寫在一起。

.container {
    grid: none | <grid-template> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>;
    
    grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?;
}

The grid property is a shorthand that sets all of the explicit grid properties (grid-template-rows, grid-template-columns, and grid-template-areas), and all the implicit grid properties (grid-auto-rows, grid-auto-columns, and grid-auto-flow), in a single declaration. Its syntax matches grid-template, plus an additional syntax form for defining auto-flow grids. 來源：W3C

也就是說 grid 可以使用以下這6種屬性，其中前三個是 grid-template 的縮寫：

1. grid-template-rows
2. grid-template-columns
3. grid-template-areas
4. grid-auto-rows
5. grid-auto-columns
6. grid-auto-flow

這樣的語法看起來很多很複雜，但縮寫可以讓網格環境更一目瞭然，且少打很多字，接下來會說明規則：

1. grid 縮寫可以定義網格樣式(grid-template)之外，還可以定義網格流向及自動產生軌道的尺寸(grid-auto相關)，但似乎只能 row 或 column 其中一邊設定 auto-flow 來產生連續網格。

2. 在 grid 裡頭設定了 grid-template-areas 屬性定義網格後，grid-auto 相關屬性就要另外寫。

3. 如果設定了 grid 屬性，其他未被定義的屬性會被重新設為預設值，前面的屬性會被預設值覆蓋 (不知道為什麼位有這樣的決定...)，這邊要特別注意不要在 grid 縮寫前設定其他屬性；但如我是使用 grid-template 就不會覆蓋。比較特別要注意的是，如果想要更換流向 column 或加上 dense，就必須將 grid-auto-flow 另外寫在 grid 的後面以避免屬性被重設。

4. 和 grid-template一樣，先列再行，並且用斜線 "/" 區隔。

直接看例子：

.container{
  grid: "h h h h" 60px
        ". c s ." 1fr
        "f f f f" 50px /
        50px 1fr minmax(80px, 1fr) 50px;


/*等同於*/
  grid-template: "h h h h" 60px
                 ". c s ." 1fr
                 "f f f f" 50px /
                 50px 1fr minmax(80px, 1fr) 50px;

/*等同於*/
  grid-template-areas:
       "h h h h"
       ". c s ."
       "f f f f"
  grid-template: 60px 1fr 50px/50px 1fr minmax(80px, 1fr) 50px;


/*等同於*/
  grid-template-areas:
       "h h h h"
       ". c s ."
       "f f f f"
  grid-template-rows: 60px 1fr 50px;
  grid-template-columns: 50px 1fr minmax(80px, 1fr) 50px;
}

5. 當然也可以額外加上名稱，不過額外添加的名稱似乎就只能放兩側。

.container{
    grid:         "h h h h" 60px
      [main-start]". c s ."[main-stop] 1fr
                  "f f f f" 50px /
          50px 1fr minmax(80px, 1fr) 50px;
}

6. 在 grid-auto 的部分可以利用來 auto-flow 和 dense 來縮寫，似乎只能 row 或 column 其中一邊設定 auto-flow 來產生連續網格，且無法直接定義更換成 column 的流向，可能需要另外寫。

.container{
    grid: 200px / auto-flow;
    grid: 200px / auto-flow dense;
    grid: auto-flow / 200px;
    grid: auto-flow dense / 200px;
}

資料來源：

• CSS 大全第四版

• CSS grid Layout Module Level 1

• MDN grid