viajamos para o futuro com o novo módulo de CSS que nos permite criar Grids de forma nativa! Nada de bibliotecas ou frameworks aqui. Criaremos nossas interfaces apenas com o bom e velho CSS, só que dessa vez, com novos superpoderes incríveis.

2. @afonsopacifer
Front-End
Developer

3. #WriteCodeEveryDay.

4. I CSS

5. CSS Grid Layout?
Um modulo CSS3 que define um grid
otimizado para interfaces
CSS Grid Layout Module Level 1
O futuro!

6. Flexbox
Interfaces simplesInterfaces complexas
Grid Layout
X É o presenteÉ o futuro
São diferentes e complementares!
Use os dois!

7. https://github.com/afonsopacifer/awesome-flexbox
A curated list of CSS Flexible Box Layout Module or only Flexbox.

8. AVISO!
Working Draft
http://www.w3.org/TR/css-grid-1/

9. Terminologia

10. Grid Lines
São as linhas que dividem o grid.

11. Grid Tracks
É o termo genérico para o espaço entre
duas grid lines, verticais ou horizontais.

12. Grid Cells
Também conhecida como grid item.
É o espaçamento entre duas line grids verticais
e duas horizontais.

13. Grid Areas
Um ou mais grid items (grid cells)

14. Show me the code

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

16. Grid Container

17. .container {
display: grid;
}
.container {
display: inline-grid;
}

18. Line-based placement

19. .container {
display: inline-grid;
}
A B C
D E F
1 column 2 column 3 column
2row1row3row
grid-template-rows:
100px 100px;
grid-template-columns:
120px 120px 120px;
100px;

20. Line-based positioning

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

22. Line-based positioning
Shorthand

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

24. Responsive Web Design

25. Redefinindo o grid

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

27. fr
A nova unidade de medida
flex

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

29. .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 = 3
1 1 1
2 + 1 + 1 = 4
A B C
2 1 1

30. Nomeando as areas
Modo Hardcore

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

32. E muito mais

33. Qual navegador suporta isso?
sintaxe antiga

34. Browsers support
http://caniuse.com/css-grid

35. Vale a pena aprender?

36. Suporte dos navegadores
visto por outro angulo
http://igalia.github.io/css-grid-layout/enable.html

37. Revista W - 2013

38. Best New Web Technology
https://thenetawards.com/vote/web-tech/css-grid-layout/

39. Eu quero usar hoje!

40. css-grid-polyfill
https://github.com/FremyCompany/css-grid-polyfill

41. Onde posso aprender mais?

42. Grid by Example
http://gridbyexample.com/

43. https://github.com/afonsopacifer/learning-css-grid-layout
Learning CSS Grid Layout

44. Obrigado :)