Desmistificando o CSS Grid Layout Simplificando o complexo 

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. 

FULL PUTASSO AAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAA AAAAAAA 

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/ 

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. 

No content

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/ 

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) 

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) 

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 

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 

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

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 

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. 

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. 

Inspetor de Grid do Firefox 

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

Primeiro passo, aplicar a marcação 

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

No content

No content

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

No content

No content

Resultado 

Responsivo 

No content

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. 

OBRIGADO! @raffaeldantass