CSS Gird layout 在最近 Chrome 更新已經慢慢開始支援 在 5/18 個人的線上問答會介紹了 CSS Grid https://www.facebook.com/WccCasper/videos/377986119264284/ 讓有興趣開發者可以有基礎的了解

1. CSS Grid Layout
這不是 float 排版。

2. 卡斯伯
• 六⾓角學院講師、⾼高雄前端社群核⼼心成員
• 專長：
• CSS、Sass
• 前端⾃自動化
• Personal Blog: http://wcc723.github.io/
• Facebook: https://www.facebook.com/WccCasper
2

3. CSS Grid Layout 有什什麼特別的
• 他是⼀一個新的 CSS 屬性，直到今年年才有比較多的瀏覽器⽀支援。
Chrome 57, Firefox 52, Safari 10.1…
• CSS Grid Layout 可以處理理⼆二維排版 (欄欄與列列)
Flex 僅能處理理 欄欄或列列
• CSS Grid 與 Flex 可以共⽤用
3

4. • 外容器與內部元件
• Container
• Item
• Grid Line
• Grid track
• Grid Cell
• Grid Area
要先了了解的內容
4

5. • 外容器與內部元件
• Container
• Item
• Grid Line
• Grid track
• Grid Cell
• Grid Area
要先了了解的內容
5

6. • 外容器與內部元件
• Container
• Item
• Grid Line
• Grid track
• Grid Cell
• Grid Area
要先了了解的內容
6

7. • 外容器與內部元件
• Container
• Item
• Grid Line
• Grid track
• Grid Cell
• Grid Area
要先了了解的內容
7

8. • 外容器與內部元件
• Container
• Item
• Grid Line
• Grid track
• Grid Cell
• Grid Area
要先了了解的內容
8

9. • 外容器與內部元件
• Container
• Item
• Grid Line
• Grid track
• Grid Cell
• Grid Area
要先了了解的內容
9

10. • 外容器與內部元件
• Container
• Item
• Grid Line
• Grid track
• Grid Cell
• Grid Area
要先了了解的內容
10
header
side main
footer footer
main
main
main
side
header
headerfooter
footerheader
header

11. 屬性介紹
11

12. • display
• grid-template
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-gap
• grid-column-gap
• grid-row-gap
• justify-items (內部元件)
• align-items (內部元件)
• justify-content (整體元件)
• align-content (整體元件)
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
外層屬性 grid:
12
必要
排版屬性
欄欄列列間隔
對⿑齊屬性
簡易易⾃自動屬性

13. • grid-column
• grid-column-start
• grid-column-end
• grid-row
• grid-row-start
• grid-row-end
• grid-area
• justify-self
• align-self
內層屬性 grid:
13
欄欄位起迄
列列位起迄
Area 定義
對⿑齊屬性

14. 休息幾秒
14

15. • display
• grid-template
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-gap
• grid-column-gap
• grid-row-gap
https://codepen.io/Wcc723/pen/jmzJWY
外層屬性 grid-template
15

16. • grid-template-columns 所能使⽤用的值非常多樣，除了了原有的 px, em …
• fr: 可以想像這是幾分之幾，比如說 1fr 2fr
• auto: 不設定，彈性延伸
• repeat: 相同部分可以使⽤用 repeat 設定 (下章節範例例)
• grid-template-areas: 這可以想像成前⾯面介紹的
畫格⼦子的概念念，雖然我很難理理解為什什麼要這麼做...
• 單⼀一元件必須連續
• 每個元件僅能出現⼀一次
外層屬性 grid-template (延伸閱讀)
16
header
side main
footer footer
main
main
main
side
header
headerfooter
footerheader
header

17. • grid-column
• grid-column-start
• grid-column-end
• grid-row
• grid-row-start
• grid-row-end
• grid-area
http://codepen.io/Wcc723/pen/bWKgPY
內層屬性 grid-area
17

18. • grid-column, grid-row
• 可以透過 start, end 指定⼀一個區間 (start, end 可以很佛⼼心反過來來寫)
• 可以⽤用 span 表⽰示推移的距離
• 如果內層與外層欄欄位數不相符，外層會⾃自動補腦
• 如果外層不設定欄欄位數，會依據內層欄欄位數補腦
• 可以使⽤用 z-index 決定先後圖層順序
http://codepen.io/Wcc723/pen/bWKgPY
內層屬性 grid-area (延伸閱讀)
18

19. • 外層
• justify-items (內部元件)
• align-items (內部元件)
• justify-content (整體元件)
• align-content (整體元件)
• 內層
• justify-self
• align-self
http://wcc723.github.io/WorkShop-gh-pages/cssGridDisplay/
對⿑齊
19

20. • 問題：請問這是誰的作品？
• https://codepen.io/Wcc723/pen/zwaZmr
接下來來，⽤用 CSS Grid 做點事情吧
20

21. 感謝參參與
21
六⾓角學院百題斬
https://www.facebook.com/hexschool/videos/804494316366550/