Chegou o dia em que vamos aprender a coisa mais bacana de grid layout, na minha opinião. Estou falando de grid-area. Com essa propriedade podemos montar nossos layout de sites "desenhando" a estrutura.
Mas o que é essa tal de grid-area?
The grid-area CSS property is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid row by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area. - Mozilla
Então basicamente a propriedade grid-area já reúne as propriedades de posicionamento da grid. É como se grid-area fosse um atalho para o posicionamento do elemento.
Como que funciona?
Primeiro quero dizer que todo o código fonte está nesse repositório do github.
Acredito que se você chegou até aqui, já sabe se virar sozinho(a) com a criação de grids. Caso ainda não saiba: veja a série de posts aqui.
Agora vamos à mão na massa.
Crie uma grid que contenha 4 itens. No meu caso, coloquei um header, um article, um aside e um footer, que são tags HTML.
Veja como ficou:
<div class="grid">
<header class="grid-item"></header>
<article class="grid-item"></article>
<aside class="grid-item"></aside>
<footer class="grid-item"></footer>
</div>
Próximo passo é definir a grid em CSS:
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
}
Nada de novo até agora. Agora vamos definir a propriedade grid-area.
A grid-area é definida nos itens da grid. Ela recebe um nome (que pode ser o que você quiser).
Ex.:
header{
grid-area: menu;
}
article{
grid-area: post;
}
aside{
grid-area: submenu;
}
footer{
grid-area: rodape;
}
A grid-area funciona mais ou menos como uma declaração de variável. Então, para uma melhor interpretação, é interessante colocar em seus nomes o que aquele item é ou o que ele vai fazer/abrigar.
Definindo o layout
A mágica acontece quando definimos grid-template-areas na div grid. É aí que vamos desenhar a estrutura : )
Lembra dos nomes que você escolheu? Vamos usar eles agora.
Ex.:
.grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"menu menu menu"
"post post submenu"
"post post submenu"
"rodape rodape rodape";
}
- "Ué, mas por que você escreveu menu três vezes?"
Escrevi três vezes porque tenho 3 colunas : )
Então basicamente o grid-template-areas pega os elementos e joga nas colunas. Como no caso do menu, vou ter as três colunas dedicada somente à ele.
Veja que você também pode mesclar as linhas com itens diferentes. Veja o caso da segunda linha: tenho duas colunas ocupadas por o article (que vai conter os posts) e na última coluna, tenho esse submenu (que geralmente é um menu lateral que as pessoas usam para fazer propagandas).
Você não desenha literalmente, mas foi quase isso ; )
Salve o arquivo e veja o resultado.
Dicas
Esse layout que foi criado é um padrão que geralmente serve para desktops. No caso de um celular, esse layout não se encaixaria bem. Portanto, você deve mudar. Use conceitos de mobile-first e media-queries. Veja como ficou o exemplo que eu coloquei no github.
Agora só falta popular essas grid-itens com conteúdos. Se divirta, qualquer dúvida é só perguntar aqui em baixo.