Pare de chutar e aprenda como funciona o CSS Grid Layout

Imagine que um amigo, chegou em você e disse:

Eu preciso criar um layout com um cabeçalho, um menu lateral, o conteúdo principal e um rodapé

Se você já esta acostumado a criar páginas HTML5 com CSS3 já deve ter imaginado toda a estrutura, algo parecido com:

Até ai tudo bem, certo? Certo, mas montar a estrutura das tags é a parte mais fácil, porém agora precisamos posiciona-las da seguinte maneira:

• Header: Em cima da página
• Aside: Na parte esquerda da página
• Main: Na parte direita da página
• Footer: Em baixo da página

Com isso iremos ter o seguinte layout:

Para você que já esta pensando nos códigos e está ancioso para começar a escrever seu .css, acredito que já deva estar imaginando diversas maneiras de chegar ao design que nosso amigo está precisando:

Posso usar flexbox, talvez eu use float, se der na louca eu utilizo o position, etc…

Pois é, normalmente eu faria esse design com float ou flexbox, iria medir o tamanho de cada elemento, adicionar um pouco de margin e padding, porém, para esse post veremos uma nova feature do CSS que nos ajuda nesse tipo de tarefa.

Conheçendo o CSS Grid Layout

Como criar layouts era uma tarefa comum no dia a dia e as vezes um tanto quanto chata de se implementar, a galera pensou: “Não existe nada que podemos fazer para agilisar esse processo ?”, então criou-se o CSS Grid Layout.

Essa nova feature do CSS, nos permite “dizer” aos elementos onde queremos que eles fiquem, qual vai ser o tamanho deles, quanto de espaçamento vai existir, conseguimos criar “lacunas” ou “buracos” que serão preenchidos por nossas tags HTML.

Começando com nosso código

Chega de mais delongas e vamos começar a codificar e por em prática tudo isso, a primeira parte será definir o HTML da página:

Com isso, iremos ter o seguinte resultado:

Como podemos ver, tudo está sem design, sem posicionamento e espaços.

Nosso primeiro passo será definir qual tag vai receber as “lacunas” para posteriormente adicionarmos nossos elementos. Bom, se tudo está dentro de body, nenhum candidato poderia ser melhor:

Vejam que o display ganhou um novo valor chamado grid, com isso estamos dizendo: "Olha navegador a tag body vai receber um grid, assim posso informar onde cada tag vai ficar", mas afinal, onde estamos dizendo e informando o posicionamento de cada tag?

Posicionando nossas tags

Para posicionar nossas tags, devemos praticamente “desenhar” no CSS, onde elas estarão, fazemos isso da seguinte maneira:

Podemos ver o resultado:

Pera ai Matheus, que maluquisse é essa ? O que é “header header header” ? Porque o posicionamento continuou errado ? Calma, vamos por partes, vou explicar as linhas que foram adicionadas.

Entendendo o Template Areas

Com a propriedade css-template-areas "desenhamos" nosso layout, assim conseguimos informar como e por quais elementos ele vai ser composto:

• “header header header”: Aqui estamos dizendo que a primeira linha vai ser composta por um header.
• “aside main main”: Aqui estamos dizendo que a segunda linha vai ser composta por um aside na esquerda e por um main na direita.
• “footer footer footer”: Aqui estamos dizendo que a terceira e última linha vai ser composta por um footer.

Assim conseguimos chegar no layout que nosso amigo estava precisando.

Mas por que você declarou o header e o footer três vezes ?

O header e footer foram declarados três vezes, porque estamos trabalhado com um layout de três colunas, isso deve-se ao fato da segunda linha do nosso template.

Mas por que três colunas ?

Sim, nossa segunda linha poderia ser com duas colunas “aside main” dessa forma, mas então por que repetimos o main duas vezes ? Repare no layout que precisamos chegar:

Veja que o main é um pouco maior do que o aside, mais precisamente, o main é duas vezes maior que o aside, por isso, tivemos que repetir o mesmo duas vezes, assim estamos dizendo para o template: “Olha template, aqui na segunda linha, vai ter um aside à esquerda e um main à direita, porém, o main deve ser duas vezes maior que o aside”.

Resultando em nosso layout de três colunas: “aside main main”, então por isso, na primeira e terceira linha devemos também ter três colunas.

Legal, agora eu entendi e tirei minhas dúvidas, vamos então dizer aos elementos que eles devem ficar naquelas “lacunas” e corrigir o posicionamento deles.

Dizendo aos elementos onde devem ficar

Para dizer aos elementos onde eles devem ficar, ou seja, qual “lacuna” é de cada um, precisamos ir em um por um deles e informar:

Assim, teremos o seguinte resultado:

Veja que cada um esta em sua devida posição, repare também que o nome informado na propriedade grid-area deve ser exatamente igual aos nomes dados no grid-template-areas, seguindo nosso layout esta faltando apenas setar a cor dos elementos, certo ?

E novamente, nosso resultado:

Mas espera ai, nosso layout possuí espaçamentos e ocupam a página toda, até agora esta tudo junto e ocupando apenas o tamanho necessário.

Dando espaçamentos entre os elementos

Vamos então, informar o espaço que devem haver entre os elementos:

Com isso, os elementos já devem estar espaçados em 1rem que seria 16px:

Falta apenas eles ocuparem a página toda

Dizendo o tamanho dos elementos

Para dizer o tamanho que cada row(linha) ou column(coluna) devem ter, precisamos também dizer ao nosso template:

Repare novamente que tanto nossas columns ou rows, estão sendo informadas três vezes, isso porque temos um layout de três colunas e três linhas, veja também que apenas para a segunda linha declaramos o valor 100vh que corresponde a altura total da viewport, as demais linhas serão automáticas.

Por padrão o valor será auto, mas apenas descrevi para você saber que pode estar mudando, para saber quais valores podem ser setados, consulte a documentação: grid-template-columns e grid-template-rows.

Com isso, devemos ter o seguinte resultado:

Bem próximo relacionado á necessidade de nosso amigo.

Dando os toques finais

Para sanar a necessidade de nosso amigo e entregar o layout para ele, vou fazer apenas algumas melhorias no design:

Pronto, agora já podemos realizar a entrega do projeto. Caso tenha necessidade o projeto pode ser baixado aqui.

E ae, você já conhecia o CSS Grid Layout ? Não deixe de comentar.

Postado em blog.matheuscastiglioni.com.br.