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

Transcript

1. Desmistificando o CSS Grid Layout Simplificando o complexo
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.
3. FULL PUTASSO AAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA AAAAAAA
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/
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.
7. 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/
8. 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)
9. 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)
10. 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
11. 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
12. Terminologia É o espaçamento que existe entre as células do grid Grid Gap Célula de uma grid
13. 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
14. 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.
15. 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.
16. Inspetor de Grid do Firefox
17. Exemplo Para exemplificar o poder do Grid Layout, vamos aplicar no layout proposto abaixo:
18. Primeiro passo, aplicar a marcação
19. Neste segundo momento, devemos definir que o container deve se comportar em modo de grid
22. Precisaremos de um grid de 3 colunas e 3 linhas para posicionar os elementos conforme desejado.
25. Resultado
26. Responsivo
28. 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.
29. OBRIGADO! @raffaeldantass