Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Dismistificando o CSS Grid Layout

Dismistificando o CSS Grid Layout

Apresentação atualizada falando sobre CSS Grid Layout de uma maneira simples.
Links dos meus artigos que acompanham a apresentação:
CSS Grid - Parte 1: http://bit.ly/grid-layout-facil-parte1

CSS Grid - Parte 2: http://bit.ly/grid-layout-facil-parte2

CSS Grid - Parte 3: http://bit.ly/grid-layout-facil-parte-final

Rafael Dantas

June 21, 2018
Tweet

More Decks by Rafael Dantas

Other Decks in Technology

Transcript

  1. Desmistificando o
    CSS Grid Layout
    Simplificando o complexo

    View full-size slide

  2. O problema? Posicionar elementos
    Posicionar elementos dentro de uma página sempre foi uma dor de cabeça para desenvolvedores;
    Display Table, Floats, Clearfix sempre foram muito utilizados, mas acabavam gerando diversos
    problemas como organização do CSS e manutenção.
    Gerava problemas de performance e não havia quase nenhum valor semântico.

    View full-size slide

  3. FULL PUTASSO
    AAAAAAAAAAAAAAAAAA
    AAAAAAAAAAAAAAAAAA
    AAAAAAA

    View full-size slide

  4. Então qual é a solução?
    Flexbox:
    CSS Grid Layout:
    - Trabalha muito bem com aplicações em pequena escala;
    - Sistema de layout Bidimensional;
    - A ideia principal é dar poder ao container para alterar os itens da melhor forma possível
    - Isso inclui tamanho, altura e ordem desses itens.
    - Mais informações: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    - Trabalha muito bem com layouts mais complexos
    - A proposta é lidar com problemas específicos da criação de layout que geralmente eram resolvidos
    com gambiarras.
    - Mais informações: https://css-tricks.com/snippets/css/complete-guide-grid/

    View full-size slide

  5. Então vamos falar mais de Grid Layout
    O draft inicial que idealizou o CSS Grid Layout veio em 2012 e foi proposto por 4 pessoas
    (3 eram integrantes da Microsoft)
    O IE 10 abriu um suporte através de flags, mas conforme a evolução da especificação o IE acabou não
    acompanhando.
    Porém, hoje em dia o suporte do Edge é total.

    View full-size slide

  6. Fallbacks para navegadores antigos
    Rachel Andrew mostra diversas opções para navegadores antigos, possibilitando
    o fallback com Progressive Enhancement
    https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
    Outra opção interessante, é um projeto mantido pela Una que mostra
    fallbacks de Grid para Flex
    http://www.gridtoflex.com/
    CSS Grid in Production - Projeto feito pela Rachel Andrews mostrando
    quais sites já implementaram o Grid Layout
    https://cssgrid.design/

    View full-size slide

  7. Terminologia
    É um quadriculado, ou seja, trata-se uma estrutura geométrica constituída por eixo
    horizontal e vertical (Linhas e Colunas).
    Grid
    Grid 4x3 (4 colunas e 3 linhas)

    View full-size slide

  8. Terminologia
    São linhas horizontais e verticais que definem o grid da esquerda para a direita e de cima para baixo.
    Grid Lines
    1 2 3
    1
    2
    3
    Grid 2x2 com 3 Grid Lines (Horizontal e Vertical)

    View full-size slide

  9. Terminologia
    É o espaço existente entre duas grid lines, pode ser horizontal ou vertical
    Grid Tracks
    1 2 3
    1
    2
    3
    Grid Track de uma coluna

    View full-size slide

  10. Terminologia
    É o espaço quadrilátero entre as grid lines horizontal e vertical
    Grid Cell
    1 2 3
    1
    2
    3
    Célula de uma grid

    View full-size slide

  11. Terminologia
    É o espaçamento que existe entre as células do grid
    Grid Gap
    Célula de uma grid

    View full-size slide

  12. Terminologia
    É uma área do Grid formado por uma ou um ainda um conjunto de células limitados pelas Grid Lines
    (uma de cada lado)
    Grid Area
    Grid Area ocupando quatro células

    View full-size slide

  13. Medida Fr
    Foi criada especialmente para trabalhar com Grid Layout;
    Ela evita que seja necessário fazer muitos cálculos para compor o tamanho de uma coluna
    ou linha, facilitando a criação do Grid;
    Evita o overflow, distribui uniformemente o tamanho da coluna/linha já considerando o
    grid-gap, caso exista, evitando quebra de layout.

    View full-size slide

  14. Inspetor de Grid do Firefox
    Para poder entender melhor o que está ocorrendo com o grid,
    temos a opção de ativar o inspetor de Grid do Firefox.
    É simples, basta pressionar CTRL + Shift + P para Windows/Linux
    e CMD + Shift + P para Mac
    Na seção Inspector, vá na aba Layout e clique no checkbox que
    indica que foi detectado um Display: Grid, logo abaixo de Overlay
    Grid, conforme exemplo ao lado.

    View full-size slide

  15. Inspetor de Grid do Firefox

    View full-size slide

  16. Exemplo
    Para exemplificar o poder do Grid Layout, vamos aplicar no layout proposto abaixo:

    View full-size slide

  17. Primeiro passo,
    aplicar a marcação

    View full-size slide

  18. Neste segundo
    momento, devemos
    definir que o container
    deve se comportar em
    modo de grid

    View full-size slide

  19. Precisaremos de um grid de 3 colunas e 3 linhas para
    posicionar os elementos conforme desejado.

    View full-size slide

  20. Grid Layout/Flexbox VS Frameworks CSS
    Com o conhecimento de Grid/Flexbox o desenvolvimento fica
    mais rápido e simples.
    Frameworks são pesados, impactam na performance e podem
    dificultar a aplicação de estilos específicos do seu projeto.
    As especificações que tratam do desenvolvimento de layouts
    evoluíram muito, facilitando o nosso trabalho.

    View full-size slide

  21. OBRIGADO!
    @raffaeldantass

    View full-size slide