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

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

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

5.
yourcompany

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.
• grid-column
• grid-column-start
• grid-column-end
• grid-row
• grid-row-start
• grid-row-end
• grid-area
• justify-self
• align-self
欄欄位起迄
列列位起迄
Area 定義
對⿑齊屬性

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.
.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.
.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.
.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.
Navbar
Header
Content
Menu
Content
Header
Navbar
Menu

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

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

15.
auto50px 200px … …

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

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

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

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

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

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

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

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

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

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

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

27.
略懂了

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

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.
貪食蛇例
http://wcc723.github.io/WorkShop-gh-pages/snakesnake/

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

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

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

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

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.
Q and A