[CSS] Grid 基本語法 -Grid Garden

平常都是使用 flex 做排版，利用這個遊戲來練習一下 grid
Grid Garden
基礎設定：

#garden {
  display: grid;
}

1. grid-column-start
   在網格中指定起始位置

2. grid-column-end
   在網格中指定結束位置

3. grid-column-end: span 2
   使用 span 來決定要跨越的寬度
   需和 grid-column-start:固定數字 搭配

4. grid-column 2/4
   grid-column-start 和 grid-column-end 的縮寫
   也可以搭配 span 寫成 grid-column: 2/span 4

5. grid-row-start
   在網格中以直列指定起始位置

6. grid-area
   grid-row 和 grid-column 的縮寫
   順序：
   grid-row-start、grid-column-start、grid-row-end，最後是 grid-column-end

7. order
   指定每一個網格的順序

8. grid-template-columns
   指定網格的大小
   grid-template-columns:20% 20% 20% 20% 20%;
   • 也可以使用 repeat()來縮寫：
     grid-template-columns: repeat(5, 20%)
   • 不只使用％ 也可以使用其他單位
     grid-template-columns:100px 3em 40%
   • 可使用 fr 以比例分配
     grid-template-columns:1fr 5fr
     網格會被分為 1/6 和 5/6

9. grid-template-rows
   指定網格的大小
   grid-template-rows: 20% 20% 20% 20% 20%;

10. grid-template
    grid-template-rows 和 grid-template-columns 的縮寫
    例如：grid-template: 60% 40% / 200px;