O documento explica o que é CSS Grid Layout, como funciona e suas principais propriedades, incluindo grid-template-rows, grid-template-columns, grid-row, grid-column e grid-gap. Também discute boas práticas, exemplos reais de sites que usam Grid Layout e as diferenças entre Grid Layout e Flexbox.

1. CSS Grid Layout

2. @laryssamagalhaes
Front end developer, mineira, apaixonada por filmes e fã de
Harry Potter.
Hello!

3. O que é CSS Grid
Layout?

4. “Possibilita criar grids de linhas e
colunas apenas com CSS, sem
depender de elementos HTML.

5. Linhas vs Colunas
Coluna 1 Coluna 2 Coluna 3
Linha 1
Linha 2
Linha 3

6. Entendendo o
Grid Layout

7. Display: grid

8. Display: grid

9. Display: inline-grid
Com a propriedade inline-grid, os grids são dispostos
lado a lado.

10. grid-template-rows e grid-template-columns

11. grid-row e grid-column

12. Resultado
header

13. grid-row e grid-column

14. Resultado
menu
header

15. grid-row e grid-column

16. Resultado
header
menu content

17. grid-row e grid-column

18. Resultado
header
contentmenu
footer

19. grid-gap

20. Resultado
header
content
10px
footer
menu
10px
15px

21. Quais são as boas
práticas?

22. grid-area
Código antigo Código novo

23. grid-template-areas

24. Resultado
header
content
10px
footer
menu
10px
15px

25. OK, mas vamos para
os exemplos reais?

27. profile
photophoto
header
avatar
photo
photos

28. Código Instagram CSS

29. Código Instagram HTML

31. nav
header
news table

32. Código Globo Esporte

33. E no responsivo?

34. Responsivo Globo esporte

35. Código responsivo site Globo Esporte

36. Grid Layout FlexboxVS

37. Grid Layout
Podemos comparar o Grid
Layout à uma casa.

38. Flexbox
E o flexbox aos móveis de
uma casa.

39. Suporte dos
navegadores

40. https://caniuse.com/#feat=css-grid

41. Polyfill
https://github.com/FremyCompany/css-grid-polyfill

42. ???

43. Quais são os 2
principais passos
para iniciar um grid
layout?

44. Qual o nome da
propriedade que
adiciona
espaçamentos entre
linhas e colunas?

45. Dado o código css:
grid-column: ¼
Quantas colunas a área
irá ocupar?

46. Qual a diferença
entre grid layout e
flexbox?

47. Perguntas?
@laryssamagalhaes - laryssamagal@gmail.com
Thanks!