CSS Grid: A Revolução do Layout de Páginas Inteiras
Olá, equipa! Se ficaste impressionado com o Flexbox, prepara-te para o próximo nível.
Imagina que o Flexbox é a ferramenta perfeita para arrumar os móveis dentro de um quarto. Podes alinhar a cama, a secretária e o roupeiro ao longo de uma parede. Mas e se quisesses desenhar a planta da casa inteira, com os seus quartos, corredores e salas?
Para isso, usamos o CSS Grid. O Grid é um sistema de layout bidimensional (linhas e colunas), criado especificamente para desenhar o esqueleto de uma página web completa.
Parte 1: O Conceito Principal - A Grelha (Grid)
A ideia do Grid é simples:
Pegamos num contentor pai (como o
<body>ou um<div>principal).Dizemos-lhe
display: grid;.Definimos uma "grelha" imaginária com colunas e linhas.
Depois, simplesmente "colocamos" cada elemento filho (como o
<header>,<main>,<footer>) na área da grelha que quisermos.
Parte 2: Mão na Massa! Criando a Nossa Primeira Grelha
Vamos reestruturar o nosso index.html para usar Grid como o layout principal. Substitui o conteúdo do teu <body> por este código semântico:
HTML:
<div class="grid-container">
<header class="grid-header">Cabeçalho</header>
<main class="grid-main">Conteúdo Principal</main>
<aside class="grid-sidebar">Barra Lateral</aside>
<footer class="grid-footer">Rodapé</footer>
</div>
CSS (adiciona isto ao teu estilos.css):
.grid-container {
display: grid;
/* Define 3 colunas: a do meio ocupa o espaço restante (1fr) */
grid-template-columns: 200px 1fr 200px;
/* Define 3 linhas de tamanhos automáticos */
grid-template-rows: auto auto auto;
gap: 10px; /* Espaço entre as áreas da grelha */
height: 100vh; /* Faz o contentor ocupar a altura toda do ecrã */
}
/* Estilo básico para vermos as áreas */
.grid-container > * {
background-color: dodgerblue;
color: white;
padding: 20px;
border-radius: 5px;
}
Se guardares agora, vais ver os elementos a tentarem formar uma grelha, mas ainda de forma estranha. Agora, vamos posicioná-los.
Parte 3: Posicionando os Itens na Grelha
Adiciona este CSS para dizer a cada item onde deve ficar:
.grid-header {
/* Começa na linha da coluna 1 e ocupa até à linha 4 (fim) */
grid-column: 1 / 4;
}
.grid-main {
/* Começa na linha 2 e ocupa até à linha 3 */
grid-column: 2 / 3;
}
.grid-sidebar {
/* Começa na linha 1 e ocupa até à linha 2 */
grid-column: 1 / 2;
}
.grid-footer {
grid-column: 1 / 4;
}
Atenção: A barra lateral ficou na primeira coluna e o conteúdo na segunda. Podes trocar as ordens como quiseres!
Guarda e vê o resultado! Tens um layout de página clássico, criado com poucas linhas de código, de forma limpa e controlada.
Parte 4: Flexbox vs. Grid - Quando Usar Cada Um?
Esta é a pergunta de ouro. A resposta é simples: eles são melhores amigos e trabalham juntos!
Usa o Grid para o layout geral da página. A "planta da casa": cabeçalho, rodapé, colunas principais. Controlo de duas dimensões (linhas E colunas).
Usa o Flexbox para alinhar os itens dentro de um componente. O "mobiliário do quarto": alinhar os itens de um menu, os cartões de uma galeria. Controlo de uma dimensão (ou linha OU coluna).
Conclusão
Que poder! Com o Grid e o Flexbox, não há nenhum layout na web que não consigas construir. Dominaste os dois pilares do CSS moderno. O Grid é perfeito para a estrutura macro da tua página, enquanto o Flexbox é o especialista nos detalhes e no alinhamento de componentes.
Agora que sabemos criar qualquer tipo de layout, vamos focar-nos nos detalhes que dão cor e vida ao nosso design. Na próxima aula, vamos mergulhar a fundo no mundo das cores, imagens de fundo e gradientes. Até lá!
Comentários
Enviar um comentário