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.
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:
- 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 a seguinte estrutura:
Para você que já esta pensando nos códigos e está ansioso para começar a escrever seu.css, acredito que deva estar imaginando diversas maneiras de chegar ao design que nosso amigo esta precisando:
Posso usarflexbox, talvez eu use float, se der na louca eu utilizo o position, etc...
Pois é, normalmente eu faria esse design comfloat ouflexbox, medindo o tamanho de cada elemento, adicionando um pouco demargin epadding... Mas, para esse post, iremos utilizar a novafeature do CSS chamada "CSS Grid Layout".
Conhecendo o 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 deCSS Grid Layout.
Começando com nosso código
Sem mais delongas, vamos começar a codificar e pôr em prática tudo isso. A primeira parte será definir oHTML 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 debody, temos um bom candidato:
body { display: grid;}
Vejam que odisplay ganhou um novo valor chamadogrid. Com isso estamos dizendo: "Olha, navegador, a tagbody 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:
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.
Entendendo o Template Areas
Com a propriedadecss-template-areas "desenhamos" nossolayout, 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 umheader.
- "aside main main": Aqui estamos dizendo que a segunda linha vai ser composta por umaside na esquerda e por um main na direita.
- "footer footer footer": Aqui estamos dizendo que a terceira e última linha vai ser composta por umfooter.
Assim conseguimos chegar nolayout que nosso amigo estava precisando.
Mas por que você declarou o header e o footer três vezes ?
Oheader efooter foram declarados três vezes, porque estamos trabalhado com um layout de três colunas, isso deve-se ao fato da segunda linha do nossotemplate.
E por que três colunas ?
Sim, nossa segunda linha poderia ser com duas colunas "aside main" dessa forma, mas então por que repetimos omain duas vezes ? Repare no layout que precisamos chegar:
Veja que omain é um pouco maior do que oaside. Mais precisamente, omain éduas vezes maior que oaside, por isso, tivemos que repetir o mesmo duas vezes, assim estamos dizendo para otemplate: "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 nossolayout 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".
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:
.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 propriedadegrid-area deve serexatamente igual aos nomes dados nogrid-template-areas. Seguindo nossolayout, 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... Nossolayout 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:
body {grid-gap: 1rem;}
Com isso, os elementos já devem estar espaçados em1rem que seria16px:
Falta apenas eles ocuparem a página toda!
Dizendo o tamanho dos elementos
Para dizer o tamanho que cadarow(linha) oucolumn(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 umlayout de três colunas e três linhas, veja também que apenas para a segunda linha declaramos o valor100vh que corresponde a altura total daviewport, 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 egrid-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 olayout 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 baixadoaqui.
Conheça também aFormação Front End daAlura e entenda um pouco mais a fundo desse mundo do Front End. :)
Leia também
#"carousel-slide">
Como gerenciar estados em aplicação React com MobX
VSCode: extensões mais usadas
2012 é o ano do mercado mobile no BrasilFormatando e Arredondando números no #"carousel-slide">
CSR, SSR e SSG: entenda as diferenças e aplicações‹›Veja outros artigos sobreFront-endQuer mergulhar em tecnologia e aprendizagem?Receba conteúdos, dicas, notícias, inovações e tendências sobre o mercado tech diretamente na sua caixa de entrada.AOVS Sistemas de Informática S.ACNPJ 05.555.382/0001-33Nossas redes e apps
YouTubeTwitterInstagramGoogle Play StoreTikTokNossas redes e apps
YouTubeTwitterInstagramGoogle Play StoreTikTokInstitucional
Sobre nósTrabalhe na AluraParaEmpresasPara Sua EscolaPolítica de PrivacidadeCompromisso de IntegridadeTermosdeUsoDocumentos InstitucionaisStatusUma empresa do grupo Alun
A Alura
ComoFuncionaFormaçõesPlataformaDepoimentosInstrutores(as)
Voltar
