Modern Web Grid Layout 能夠讓網頁設計更容易做出類似平面設計的排版，網格更從以往的一維進入了二維 (一個行到整個面)。本次會快速介紹如何簡單理解 Grid Layout 的語法，並且透過實績案例展示如何運用，讓開發者輕鬆上手不馬虎。 想聽更多有趣的，可參考卡斯伯粉絲團喔 https://www.facebook.com/WccCasper

3. 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.

5. yourcompany
• 六⾓角學院講師
⾼高雄前端社群核⼼心成員
• 專長：
• CSS、Sass
• 視覺設計
• Personal Blog: http://wcc723.github.io/
• Facebook: https://fb.com/wccCasper

6. • 快速了解 Grid Layout
• 案例說明

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

11. yourcompany

14. • 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
必要
排版屬性
欄欄列列間隔
對⿑齊屬性
簡易易⾃自動屬性

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

17. .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 ;

18. .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
… …

19. .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;

20. .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;

22. Navbar
Header
Content
Menu
Content
Header
Navbar
Menu

23. Navbar
Header
Content
Menu
300px auto
Content
Header
Navbar
Menu
1
2
3
4
1 2 3
5

24. 範例 網⾴
https://codepen.io/Wcc723/full/EvWZgo/

26. auto50px 200px … …

27. auto50px 200px … …
justify-content (整體元件⽔平對齊)

28. auto50px 200px … …
justify-content: flex-end

29. auto50px 200px … …
justify-content: flex-start

30. auto50px 200px … …
justify-content: center

31. justify-content: space-between
auto50px 200px … …

32. auto
50px 200px … …
align-content: (整體元件垂直對齊)

33. align-content: flex-start;
auto
50px 200px … …

34. auto
50px 200px … …
• justify-items: center (內部元件⽔平位置)
• align-items: center (內部元件垂直位置)

35. auto
50px 200px … …
• justify-items: center (內部元件⽔平位置)
• align-items: center (內部元件垂直位置)
• justify-self: flex-end;
• align-self: flex-start;

36. 外層 justify-content
外層 align-content
外層 justify-items
外層 align-items
內層 justify-self
內層 align-self

37. • 對齊排版
• http://wcc723.github.io/WorkShop-gh-pages/
cssGridDisplay/

38. 略懂了

39. .container {
display: grid;
grid-template-columns:
repeat(16, 45px);
grid-template-rows:
repeat(16, 45px);
}

40. 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

43. 貪食蛇例
http://wcc723.github.io/WorkShop-gh-pages/snakesnake/

48. .grid {
transform: skewY(-12deg);
}
參考說明
https://goo.gl/A7ufbs

49. Stripe 網⾴
https://stripe.com/connect

50. Grid Layout 平⾯風格網⾴
https://goo.gl/vkbNrZ

52. 優點
• 可以做出類似平⾯設計風格的網⾴
• 排版模式又多了⼀種選擇
缺點
• ⽬前⽀援度還不⾜
• 很多坑⽤過才會體會

53. 範例
• 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

54. Q and A