Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css3 Grid Layout

2,318 views

Published on

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

Published in: Technology
  • Be the first to comment

Css3 Grid Layout

  1. 1. CSS Grid Layout 這不是 float 排版。
  2. 2. 卡斯伯 • 六⾓角學院講師、⾼高雄前端社群核⼼心成員 • 專長: • CSS、Sass • 前端⾃自動化 • Personal Blog: http://wcc723.github.io/ • Facebook: https://www.facebook.com/WccCasper 2
  3. 3. CSS Grid Layout 有什什麼特別的 • 他是⼀一個新的 CSS 屬性,直到今年年才有比較多的瀏覽器⽀支援。
 Chrome 57, Firefox 52, Safari 10.1… • CSS Grid Layout 可以處理理⼆二維排版 (欄欄與列列)
 Flex 僅能處理理 欄欄或列列 • CSS Grid 與 Flex 可以共⽤用 3
  4. 4. • 外容器與內部元件 • Container • Item • Grid Line • Grid track • Grid Cell • Grid Area 要先了了解的內容 4
  5. 5. • 外容器與內部元件 • Container • Item • Grid Line • Grid track • Grid Cell • Grid Area 要先了了解的內容 5
  6. 6. • 外容器與內部元件 • Container • Item • Grid Line • Grid track • Grid Cell • Grid Area 要先了了解的內容 6
  7. 7. • 外容器與內部元件 • Container • Item • Grid Line • Grid track • Grid Cell • Grid Area 要先了了解的內容 7
  8. 8. • 外容器與內部元件 • Container • Item • Grid Line • Grid track • Grid Cell • Grid Area 要先了了解的內容 8
  9. 9. • 外容器與內部元件 • Container • Item • Grid Line • Grid track • Grid Cell • Grid Area 要先了了解的內容 9
  10. 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. 屬性介紹 11
  12. 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. 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. 休息幾秒 14
  15. 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. 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. 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. 18. • grid-column, grid-row • 可以透過 start, end 指定⼀一個區間 (start, end 可以很佛⼼心反過來來寫) • 可以⽤用 span 表⽰示推移的距離 • 如果內層與外層欄欄位數不相符,外層會⾃自動補腦 • 如果外層不設定欄欄位數,會依據內層欄欄位數補腦 • 可以使⽤用 z-index 決定先後圖層順序 http://codepen.io/Wcc723/pen/bWKgPY 內層屬性 grid-area (延伸閱讀) 18
  19. 19. • 外層 • justify-items (內部元件) • align-items (內部元件) • justify-content (整體元件) • align-content (整體元件) • 內層 • justify-self • align-self http://wcc723.github.io/WorkShop-gh-pages/cssGridDisplay/ 對⿑齊 19
  20. 20. • 問題:請問這是誰的作品? • https://codepen.io/Wcc723/pen/zwaZmr 接下來來,⽤用 CSS Grid 做點事情吧 20
  21. 21. 感謝參參與 21 六⾓角學院百題斬 https://www.facebook.com/hexschool/videos/804494316366550/

×