Mais conteúdo relacionado Css3 Grid Layout3. CSS Grid Layout 有什什麼特別的
• 他是⼀一個新的 CSS 屬性,直到今年年才有比較多的瀏覽器⽀支援。
Chrome 57, Firefox 52, Safari 10.1…
• CSS Grid Layout 可以處理理⼆二維排版 (欄欄與列列)
Flex 僅能處理理 欄欄或列列
• CSS Grid 與 Flex 可以共⽤用
3
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
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 定義
對⿑齊屬性
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
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