Como usar css grid

1. Ou CSS Grid: um guia da
layout na
web

2. @carolcode
Desenvolvedora Front end, co-organizadora do HTML-SP, professora,
estudante de Sistemas para internet e compra brigas na empresa Twitter
#MeuLugaremTI #CodamosSummit

3. Mas afinal, o que é sistema de Grid?
_ Grid > grade
_ Estrutura de documentos empilhados (vertical x
horizontal)
_ Considerado o primeiro módulo CSS criado
especificamente para resolver os problemas de layout do passado
_ Tabelas? Tô fora! Pego meu css grid e vou
embora!

4. Grid na vida real

8. Flexbox ou CSS Grid?
FLEXBOX
_ layout unidimensional
_ apropriado para os componentes de
um aplicativo e layouts em pequena
escala
CSS Grid
_ layout bidimensional complexo
_ adequado para organizar a estrutura de
layout de elementos de nível mais alto,
como cabeçalhos, rodapés, sidebar e
seções

9. Porque devo usar?
_ Aumento de produtividade
_ Versatilidade
_ Layouts responsivos

10. Componentes básicos
_ LINHAS E COLUNAS
_ LINHAS ACOMODAM COLUNAS
_ COLUNAS COMPÕEM ESTRUTURA + ENVOLVE
CONTEÚDO
*alguns sistemas de grid também incluem container - para
envolver o layout

13. Para praticar
cssgridgarden.com

14. gridcritters.com

15. Keep Calm it’s CSS

16. OBRIGAD
A