Criando Layouts com 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ê está acostumado a criar páginas HTML5 com CSS3 já deve ter imaginado toda a estrutura, algo parecido com:
<header>Cabeçalho</header>
<aside>Menu lateral</aside>
<main>Conteúdo principal</main>
<footer>Rodapé</footer>
Até ai tudo bem, certo? Certo. Montar a estrutura das tags é a parte mais fácil... Porém, agora precisamos posiciona-las da seguinte maneira:
Com isso iremos ter a seguinte estrutura:
Para você que já esta pensando nos códigos e está ancioso para começar a escrever seu .css, acredito que deva estar imaginando diversas maneiras de chegar ao design que nosso amigo esta 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, medindo o tamanho de cada elemento, adicionando um pouco de margin e padding... Mas, para esse post, iremos utilizar a nova feature do CSS chamada "CSS Grid Layout".
Como criar layouts era uma tarefa comum no dia-a-dia e às vezes um tanto quanto chata de se implementar, a galera pensou: "Será que não seria possível melhorar esse processo, deixando mais rápido e eficiente?", foi nesse contexto que criou-se a nova funcionalidade chamada de CSS Grid Layout.
Imagine só um recurso que nos permite "dizer" aos elementos onde queremos que eles fiquem, qual vai ser o tamanho deles, quanto de espaçamento vai existir, criar "lacunas" ou "buracos" que serão preenchidos por nossas tags HTML. Com CSS Grid Layout é exatamente isso que conseguimos.
Sem mais delongas, vamos começar a codificar e pôr em prática tudo isso. A primeira parte será definir o HTML da página:
<header class="o-header">Header</header>
<aside class="o-aside">Aside</aside>
<main class="o-footer">Main</main>
<footer class="o-footer">Footer</footer>
Com isso, iremos ter o seguinte resultado:
Como podemos ver, tudo está sem posicionamento e espaços.
Nosso primeiro passo será definir qual tag vai receber as "lacunas" para posteriormente adicionarmos nossos elementos. Bom, se tudo esta dentro de body, temos um bom candidato:
body {
display: grid;
}
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 ?
Para posicionar nossas tags, devemos praticamente "desenhar" no CSS, onde elas estarão:
body {
display: grid;
grid-template-areas:
"header header header"
"aside main main"
"footer footer footer";
}
Podemos ver o resultado:
Pera aí, Matheus, que maluquisse é essa? O que é "header header header"?
Calma, vamos por partes, vou explicar as linhas que foram adicionadas.
Com a propriedade css-template-areas "desenhamos" nosso layout, assim conseguimos informar como e por quais elementos ele vai ser composto:
Assim conseguimos chegar no layout que nosso amigo estava precisando.
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.
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".
Para dizer aos elementos onde eles devem ficar, ou seja, qual "lacuna" é de cada um, precisamos ir em um por um deles e informar:
.o-header {
grid-area: header;
}
.o-aside {
grid-area: aside;
}
.o-main {
grid-area: main;
}
.o-footer {
grid-area: footer;
}
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 ?
.o-header, .o-aside, .o-main, .o-footer {
background: #BC20E2;
color: #FDFDFD;
}
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.
Vamos então, informar o espaço que devem haver entre os elementos:
body {
grid-gap: 1rem;
}
Com isso, os elementos já devem estar espaçados em 1rem que seria 16px:
Falta apenas eles ocuparem a página toda!
Para dizer o tamanho que cada row(linha) ou column(coluna) devem ter, precisamos também dizer ao nosso template:
body {
grid-template-columns: auto auto auto;
grid-template-rows: auto 100vh auto;
}
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.
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.
Conheça também a Carreira de Engenheiro Front End da Alura e entenda um pouco mais a fundo desse mundo do Front End. :)