[CSS] Grid 基本語法 -Grid Garden

平常都是使用 flex 做排版,利用這個遊戲來練習一下 grid
Grid Garden
基礎設定:
#garden {
display: grid;
}
-
grid-column-start
在網格中指定起始位置 -
grid-column-end
在網格中指定結束位置 -
grid-column-end: span 2
使用 span 來決定要跨越的寬度
需和 grid-column-start:固定數字 搭配 -
grid-column 2/4
grid-column-start 和 grid-column-end 的縮寫
也可以搭配 span 寫成 grid-column: 2/span 4 -
grid-row-start
在網格中以直列指定起始位置 -
grid-area
grid-row 和 grid-column 的縮寫
順序:
grid-row-start、grid-column-start、grid-row-end,最後是 grid-column-end -
order
指定每一個網格的順序 - 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
- 也可以使用 repeat()來縮寫:
-
grid-template-rows
指定網格的大小
grid-template-rows: 20% 20% 20% 20% 20%; - grid-template
grid-template-rows 和 grid-template-columns 的縮寫
例如:grid-template: 60% 40% / 200px;