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.

[Modern Web] CSS3 Grid Layout

3,393 views

Published on

Modern Web
Grid Layout 能夠讓網頁設計更容易做出類似平面設計的排版,網格更從以往的一維進入了二維 (一個行到整個面)。本次會快速介紹如何簡單理解 Grid Layout 的語法,並且透過實績案例展示如何運用,讓開發者輕鬆上手不馬虎。

想聽更多有趣的,可參考卡斯伯粉絲團喔
https://www.facebook.com/WccCasper

Published in: Technology
  • If you think I�m sexy come watch! www.sexsearch.online
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

[Modern Web] CSS3 Grid Layout

  1. 1. consectetur adipisicing elit, sed do eiusmod tempor incididunt consectetur adipisicing elit, sed do eiusmod tempor incididunt dolor in reprehenderit in voluptate eiusmod sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  2. 2. yourcompany • 六⾓角學院講師
 ⾼高雄前端社群核⼼心成員 • 專長: • CSS、Sass • 視覺設計 • Personal Blog: http://wcc723.github.io/ • Facebook: https://fb.com/wccCasper
  3. 3. • 快速了解 Grid Layout • 案例說明
  4. 4. • 他是⼀個新的 CSS 屬性,直到今年才有比較多的 瀏覽器⽀援。
 Chrome 57, Firefox 52, Safari 10.1… • CSS Grid Layout 可以處理⼆維排版 (欄與列)
 Flex 僅能處理 欄或列 • CSS Grid 與 Flex 可以共⽤
  5. 5. yourcompany
  6. 6. • 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 必要 排版屬性 欄欄列列間隔 對⿑齊屬性 簡易易⾃自動屬性
  7. 7. • grid-column • grid-column-start • grid-column-end • grid-row • grid-row-start • grid-row-end • grid-area • justify-self • align-self 欄欄位起迄 列列位起迄 Area 定義 對⿑齊屬性
  8. 8. .container { } 50px 200px auto 100px auto … … gap display: grid; grid-template-columns: 50px 200px auto 200px 50px; grid-gap: 10px 15px; grid-template-rows: 100px auto 100px ;
  9. 9. .container { display: grid; grid-template-columns: 50px 200px auto 200px 50px; grid-template-rows: 100px auto 100px ; grid-gap: 10px 15px; } 50px 200px auto 1 2 3 4 5 6 1 2 3 4 100px auto … …
  10. 10. .item-xxx{ grid-column: start / end; grid-row: start / end; } 50px 200px auto 1 2 3 4 5 6 1 2 3 4 100px auto … … grid-column: 1 / 3; grid-row: 2 / 3; grid-column: 1 / 3; grid-row: 2 / 3;
  11. 11. .item-xxx{ grid-column: start / end; grid-row: start / end; } 50px 200px auto 1 2 3 4 5 6 1 2 3 4 100px auto … … grid-column: 1 / 6; grid-row: 1 / 2; grid-column: 1 / 3; grid-row: 2 / 3; grid-column: 3 / 6; grid-row: 3 / 4;
  12. 12. Navbar Header Content Menu Content Header Navbar Menu
  13. 13. Navbar Header Content Menu 300px auto Content Header Navbar Menu 1 2 3 4 1 2 3 5
  14. 14. 範例 網⾴
 https://codepen.io/Wcc723/full/EvWZgo/
  15. 15. auto50px 200px … …
  16. 16. auto50px 200px … … justify-content (整體元件⽔平對齊)
  17. 17. auto50px 200px … … justify-content: flex-end
  18. 18. auto50px 200px … … justify-content: flex-start
  19. 19. auto50px 200px … … justify-content: center
  20. 20. justify-content: space-between auto50px 200px … …
  21. 21. auto 50px 200px … … align-content: (整體元件垂直對齊)
  22. 22. align-content: flex-start; auto 50px 200px … …
  23. 23. auto 50px 200px … … • justify-items: center (內部元件⽔平位置) • align-items: center (內部元件垂直位置)
  24. 24. auto 50px 200px … … • justify-items: center (內部元件⽔平位置) • align-items: center (內部元件垂直位置) • justify-self: flex-end; • align-self: flex-start;
  25. 25. 外層 justify-content 外層 align-content 外層 justify-items 外層 align-items 內層 justify-self 內層 align-self
  26. 26. • 對齊排版 • http://wcc723.github.io/WorkShop-gh-pages/ cssGridDisplay/
  27. 27. 略懂了
  28. 28. .container { display: grid; grid-template-columns: 
 repeat(16, 45px); grid-template-rows: 
 repeat(16, 45px); }
  29. 29. grid-column: 3 / 11; grid-row: 3 / 11; .container { display: grid; grid-template-columns: 
 repeat(16, 45px); grid-template-rows: 
 repeat(16, 45px); } 蒙德⾥安範例
 https://goo.gl/erWkg6
  30. 30. 貪食蛇例
 http://wcc723.github.io/WorkShop-gh-pages/snakesnake/
  31. 31. .grid { transform: skewY(-12deg); } 參考說明
 https://goo.gl/A7ufbs
  32. 32. Stripe 網⾴
 https://stripe.com/connect
  33. 33. Grid Layout 平⾯風格網⾴
 https://goo.gl/vkbNrZ
  34. 34. 優點 • 可以做出類似平⾯設計風格的網⾴ • 排版模式又多了⼀種選擇 缺點 • ⽬前⽀援度還不⾜ • 很多坑⽤過才會體會
  35. 35. 範例 • https://codepen.io/Kseso/pen/xqNdmO • https://stripe.com/connect • https://goo.gl/vkbNrZ 參考⽂件 • https://css-tricks.com/snippets/css/complete-guide-grid/ • https://developer.mozilla.org/en-US/docs/Web/CSS/ CSS_Grid_Layout
  36. 36. Q and A

×