[Modern Web] CSS3 Grid Layout

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.

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

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

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

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

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

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

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

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

Navbar
Header
Content
Menu
Content
Header
Navbar
Menu

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

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

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

justify-content: ﬂex-end

justify-content: ﬂex-start

justify-content: center

justify-content: space-between

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

align-content: ﬂex-start;
auto
50px 200px … …

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

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

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

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

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

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

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

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

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

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

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

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

[Modern Web] CSS3 Grid Layout

More Related Content

What's hot (20)

More from Chih-cheng Wang (11)

[Modern Web] CSS3 Grid Layout