Ou CSS Grid: um guia da
layout na
web
@carolcode
Desenvolvedora Front end, co-organizadora do HTML-SP, professora,
estudante de Sistemas para internet e compra brigas na empresa Twitter
#MeuLugaremTI #CodamosSummit
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!
Grid na vida real
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
Porque devo usar?
_ Aumento de produtividade
_ Versatilidade
_ Layouts responsivos
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
Para praticar
cssgridgarden.com
gridcritters.com
Keep Calm it’s CSS
OBRIGAD
A

Layout na web: um guia de 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, oque é 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.
  • 8.
    Flexbox ou CSSGrid? 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 _ LINHASE COLUNAS _ LINHAS ACOMODAM COLUNAS _ COLUNAS COMPÕEM ESTRUTURA + ENVOLVE CONTEÚDO *alguns sistemas de grid também incluem container - para envolver o layout
  • 13.
  • 14.
  • 15.
  • 16.