Módulo 10: CSS Grid (Layouts de Elite)
2. Resumo da Aula Anterior
No Módulo 9, dominámos o alinhamento de elite com Flexbox. Agora, vamos conhecer o seu "irmão mais velho" e ainda mais poderoso: o CSS Grid, capaz de controlar todo o layout do site em duas dimensões.
3. O Que Vais Aprender Hoje
- ✅ Ativar a grelha com display: grid.
- ✅ Criar colunas e linhas flexíveis.
- ✅ Usar a unidade fr (fracção).
- ✅ A função repeat().
- ✅ Diferença real entre Flexbox e Grid.
4. Teoria: A Malha de Ferro
Conceito: Enquanto o Flexbox é ótimo para alinhar coisas numa única direção (uma fila de botões, por exemplo), o Grid permite-nos desenhar colunas e linhas ao mesmo tempo. É como ter uma folha de excel invisível onde encaixamos as peças do site.
📓 Analogia: O Jornal vs. A Corda
Imagina que estás a organizar elementos:
- Flexbox (A Corda): Estás a pendurar fotos numa corda de roupa. Elas Movem-se ao longo da corda (uma dimensão).
- CSS Grid (O Jornal): Tens uma página de jornal com grelhas pré-definidas para o título, a notícia principal e a coluna da direita. Podes colocar o conteúdo exatamente no "quadradinho" que queres (duas dimensões).
5. Exemplos Práticos
Exemplo 1: Uma Grelha Básica
Criar 3 colunas iguais em segundos.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 colunas iguais */
gap: 20px; /* Espaço entre elas */
}A unidade fr divide o espaço livre de forma justa.
Exemplo 2: O Poder do Repeat
Escrever menos código para grelhas grandes.
.grid-fotos {
display: grid;
/* Cria 4 colunas de 200px cada uma */
grid-template-columns: repeat(4, 200px);
}O repeat(quantidade, tamanho) é essencial para não repetires valores iguais.
6. Agora é a Tua Vez!
Vamos criar o layout de um "Painel de Admin":
- Cria uma
<main>com 4 divs lá dentro (Menu, Estatística 1, Estatística 2, Tabela). - No CSS, ativa o
display: gridna main. - Define
grid-template-columns: 250px 1fr 1fr;(Uma barra lateral fixa e duas colunas flexíveis). - Adiciona um
gap: 15pxpara tudo respirar. - Experimenta mudar o
1fr 1frporrepeat(2, 1fr).
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 CSS Grid é bidimensional (Colunas e Linhas).
- 📌 grid-template-columns define a "largura" das colunas.
- 📌 fr é a unidade de "Fracção" do espaço disponível.
- 📌 gap funciona tanto para disparidade entre colunas como entre linhas.
9. Desafios Práticos
Desafio 1: O Ecrã Inteiro
Como farias uma grelha que ocupa 100% da altura da página de forma automática?
Desafio 2: Misturar Unidades
É possível ter grid-template-columns: 100px 1fr;? O que aconteceria?
Desafio 3: Quando usar o quê?
Se tens apenas 2 botões para alinhar no centro de uma caixa, usas Flexbox ou Grid?