Contenu connexe Plus de Chih-cheng Wang (11) [Modern Web] CSS3 Grid Layout 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.
7. • 他是⼀個新的 CSS 屬性,直到今年才有比較多的
瀏覽器⽀援。
Chrome 57, Firefox 52, Safari 10.1…
• CSS Grid Layout 可以處理⼆維排版 (欄與列)
Flex 僅能處理 欄或列
• CSS Grid 與 Flex 可以共⽤
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
必要
排版屬性
欄欄列列間隔
對⿑齊屬性
簡易易⾃自動屬性
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 ;
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;
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;
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