[CSS] Grid 基本語法 -Grid Garden

Grid Garden 遊戲介面
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;