Embed Size (px)
Citation preview
@afonsopacifer
Front-End Developer
#WriteCodeEveryDay.
I CSS
CSS Grid Layout?
Um modulo CSS3 que define um grid otimizado para interfaces
CSS Grid Layout Module Level 1
O futuro!
Flexbox
Interfaces simplesInterfaces complexas
Grid Layout
X É o presenteÉ o futuro
São diferentes e complementares!
Use os dois!
https://github.com/afonsopacifer/awesome-flexbox
A curated list of CSS Flexible Box Layout Module or only Flexbox.
AVISO!Working Draft
http://www.w3.org/TR/css-grid-1/
Terminologia
Grid LinesSão as linhas que dividem o grid.
Grid TracksÉ o termo genérico para o espaço entre duas grid lines, verticais ou horizontais.
Grid CellsTambém conhecida como grid item.
É o espaçamento entre duas line grids verticais e duas horizontais.
Grid AreasUm ou mais grid items (grid cells)
Show me the code
<div class=“container”> <div class=“a”>A</div> <div class=“b”>B</div> <div class=“c”>C</div> <div class=“d”>D</div> <div class=“e”>E</div> <div class=“f”>F</div>
</div>
HTML
Grid Container
.container { display: grid;
}
.container { display: inline-grid;
}
Line-based placement
.container { display: inline-grid;
}
A B C
D E F
1 column 2 column 3 column
2 ro
w1
row
3 ro
w
grid-template-rows: 100px 100px;grid-template-columns: 120px 120px 120px;
100px;
Line-based positioning
.a {
}
B C
D
grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2;
A
E.f {
}
grid-column-start: 3;grid-column-end: 4;grid-row-start: 2;grid-row-end: 3;
F
Line-based positioning Shorthand
B C
D
A
E F.a {
}
grid-column: 1 / 2;grid-row: 1 / 2;
.a {
}
grid-column-start: 1;grid-column-end: 2;grid-row-start: 1;grid-row-end: 2;
.a {
}grid-area: 1 / 1 / 2 / 2;
Responsive Web Design
Redefinindo o grid
C D
A
E F
.a {grid-area: 1 / 1 / 2 / 4;}
.b {grid-area: 2 / 1 / 3 / 2;}
.c {grid-area: 2 / 2 / 2 / 3;}
.d {grid-area: 2 / 3 / 2 / 4;}
.e {grid-area: 3 / 1 / 4 / 3;}
.d {grid-area: 3 / 3 / 4 / 4;}
B
@media screen and (max-width: 666px) {
}
.a {grid-area: 3 / 1 / 2 / 4;}
.e {grid-area: 1 / 1 / 2 / 3;}
.d {grid-area: 1 / 3 / 2 / 4;}
b c d
e f
A
frA nova unidade de medida
flex
A B C
.container { display: grid;
}
grid-template-rows: 100px;grid-template-columns: 100px auto 100px;
A B C
.container { display: grid;
}
grid-template-rows: 100px;grid-template-columns: 100px 1fr 100px;
.container { display: grid;
}
grid-template-rows: 100px;grid-template-columns: 1fr 1fr 1fr;
.container { display: grid;
}
grid-template-rows: 100px;grid-template-columns: 2fr 1fr 1fr;
A B C
1 + 1 + 1 = 31 1 1
2 + 1 + 1 = 4
A B C
2 1 1
Nomeando as areasModo Hardcore
.a {grid-area: header;}
.b {grid-area: aside;}
.c {grid-area: main;}
.d {grid-area: footer;}
.container { display: grid; grid-template-rows: auto; grid-template-columns: auto; grid-template-areas:“header header header” “aside . main” “aside content content” “. . footer”;
}
main
header
content
aside
footer
E muito mais
Qual navegador suporta isso?
sintaxe antiga
Browsers support
http://caniuse.com/css-grid
Vale a pena aprender?
Suporte dos navegadores visto por outro angulo
http://igalia.github.io/css-grid-layout/enable.html
Revista W - 2013
Best New Web Technology
https://thenetawards.com/vote/web-tech/css-grid-layout/
Eu quero usar hoje!
css-grid-polyfill
https://github.com/FremyCompany/css-grid-polyfill
Onde posso aprender mais?
Grid by Example
http://gridbyexample.com/
https://github.com/afonsopacifer/learning-css-grid-layout
Learning CSS Grid Layout
Obrigado :)
