Exercícios GRID

Exercício: Layout de Dashboard

Vamos criar um layout composto por um cabeçalho superior, um menu lateral, uma área de conteúdo principal e um rodapé. O objetivo é utilizar o CSS Grid para organizar essas peças em uma malha de linhas e colunas, controlando o espaço e a posição de cada área de forma responsiva e estruturada.

Instruções:

• No arquivo HTML, crie um contêiner principal que englobe as quatro áreas do layout usando as tags semânticas apropriadas para cada uma delas.
• No CSS, defina esse contêiner como um Grid composto por 4 colunas distribuídas uniformemente e 3 linhas (com 50px, 400px e 50px de altura, respectivamente). Adicione um espaçamento de 10px entre os elementos do grid.
• Configure o cabeçalho e o rodapé para que se estiquem e ocupem toda a largura da página, de ponta a ponta.
• A barra lateral deve ficar posicionada à esquerda, ocupando apenas a primeira coluna da linha central.
• A área de conteúdo principal deve preencher todo o espaço restante da linha central, posicionando-se ao lado da barra lateral.

Dica Visual: Zere as margens padrão do navegador (margin: 0; padding: 0;). Use um fundo cinza claro (lightgray) no contêiner principal e aplique um pequeno padding. No cabeçalho, use um fundo azul escuro/ardósia (background-color: #1e293b) com texto branco. Para a barra lateral e o conteúdo principal, utilize um fundo branco (background-color: #fff). Por fim, aplique um tom de cinza claro (#e2e8f0) no rodapé para destacá-lo da área principal.

Resultado Esperado:

Exercício 2: Vitrine de Produtos

Neste exercício, vamos criar um padrão muito comum em e-commerces: a grade de produtos. O foco aqui é construir um layout que exiba múltiplos itens lado a lado de forma simétrica e alinhada.

Instruções:

• Crie um contêiner principal para englobar todos os produtos.
• Transforme esse contêiner em um Grid e configure-o para ter exatamente 3 colunas, onde cada coluna deve ter a largura fixa de 250px.
• Centralize o conteúdo do Grid na página e aplique um espaçamento de 20px entre os elementos.
• Dentro do contêiner, crie 6 blocos que representarão os “cards” dos produtos. Cada card deve conter um espaço para a imagem, um título e um preço.

Dica Visual: Para os cards, utilize fundo branco, uma borda fina e clara (#e2e8f0), bordas levemente arredondadas e o texto centralizado. Adicione uma sombra muito sutil para dar profundidade. O espaço da imagem pode ser apenas um bloco cinza (#e2e8f0) com 150px de altura.

Resultado Esperado:

Exercício 3: Estrutura de Calendário

O calendário é o exemplo perfeito da utilidade do CSS Grid. A exigência estrutural é rígida e previsível, exigindo precisão na divisão do espaço.

Instruções:

• Crie um contêiner principal que representará o calendário como um todo.
• Defina este contêiner como um Grid com a regra de ouro de um calendário: 7 colunas de dimensões exatamente iguais. Adicione um espaço pequeno (5px) entre os dias.
• Insira os elementos internos na seguinte ordem: 7 blocos para os cabeçalhos da semana (Dom a Sáb), alguns blocos para os dias finais do mês anterior, e os blocos numerados para os dias do mês atual.

Dica Visual: O contêiner do calendário deve ter uma largura fixa de 600px e um fundo cinza (#e2e8f0). Os blocos dos dias devem ter fundo branco, um bom preenchimento interno (padding) e texto centralizado. Destaque os dias da semana (cabeçalho) com um fundo azul (#3b82f6), texto branco, negrito e letras maiúsculas. Para os dias do mês anterior, reduza o contraste usando texto cinza (#94a3b8) e um fundo quase branco (#f8fafc).

Resultado Esperado:

Exercício 4: Formulário de Checkout com Mesclagem de Colunas

Muitas vezes, um layout em Grid precisa ter exceções à regra. Neste exercício, vamos construir um formulário de pagamento em duas colunas, mas forçar elementos maiores (como o e-mail e o endereço) a quebrarem esse padrão e ocuparem a linha inteira.

Instruções:

• Crie um formulário e defina-o como um Grid de 2 colunas predefinidas de tamanhos iguais. Adicione um espaçamento de 20px entre os campos.
• Adicione grupos de formulário (contendo um rótulo e um campo de entrada) para: Nome, Sobrenome, E-mail, Morada Completa, Código Postal e Localidade. Adicione também um botão de envio ao final.
• O Desafio: Por padrão, cada campo ocupará uma coluna. Você deve criar uma classe específica no CSS e aplicá-la aos grupos “E-mail”, “Morada Completa” e ao “Botão”. Essa classe deve forçar o elemento a esticar desde a linha de início até a linha final absoluta do contêiner, ocupando toda a largura disponível.

Dica Visual: O formulário deve ter uma largura máxima de 700px, fundo branco, espaçamento interno generoso e uma sombra suave. Os rótulos (labels) devem ter fonte menor, negrito e cor escura (#475569). Os campos de entrada (inputs) precisam de bordas sólidas (#cbd5e1), cantos arredondados e bom preenchimento interno. O botão de envio deve ter um fundo verde (#10b981), texto branco em negrito, sem bordas, e o cursor em formato de “mãozinha” (pointer).

Resultado Esperado: