Aprenda CSS com Jogos: Flexbox Froggy e Grid Garden

Comece com Flexbox Froggy para praticar o alinhamento ao longo de um eixo e, em seguida, use Grid Garden para praticar a colocação de um item entre linhas de grade. Após cada exercício do jogo, reproduza a ideia em uma pequena página própria. Um resultado útil é ser capaz de explicar por que uma declaração funciona quando o layout muda, em vez de memorizar a resposta de um nível específico.

Como aprender CSS com jogos e depois aplicá-lo

Este método combina dois jogos com três exercícios originais. É adequado para quem consegue ler uma regra CSS simples e deseja feedback visual. Não é um curso completo de desenvolvimento web: interfaces reais também precisam de conteúdo legível, comportamento responsivo, acesso por teclado e testes com diferentes quantidades de texto.

Escolha o exercício certo para sua pergunta

Os jogos são da Codepip. Cozcade vincula cada jogo hospedado ao seu guia correspondente: Flexbox Froggy e seu guia; Grid Garden e seu guia. As páginas originais do Froggy e Grid Garden fornecem as versões dos próprios autores. Use um teclado ao seguir os exercícios de código aqui.

Primeiro, nomeie o eixo antes de escolher uma propriedade.

O Flexbox possui um eixo principal e um eixo transversal. flex-direction define a direção principal; justify-content posiciona os itens ao longo desse eixo principal, enquanto align-items se refere ao eixo transversal. Em uma linha normal da esquerda para a direita, o eixo principal é horizontal. Altere a direção para uma coluna e ele se torna vertical. Essas definições são abordadas na Introdução ao Flexbox de MDN.

Antes de tentar declarações no Froggy, diga em qual direção você deseja que os itens se movam. Em seguida, nomeie essa direção em relação ao eixo principal atual. Isso transforma uma resposta errada em uma pergunta específica: você escolheu a propriedade errada, o valor errado ou o eixo errado?

Exercício 1: mover um grupo para a extremidade

Crie três itens pequenos dentro de um contêiner. Este é um exercício original, não uma cópia de um nível de jogo ou gabarito.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Seu objetivo é mover os três itens juntos em direção à borda direita sem alterar a ordem deles ou dar a cada item uma margem separada. Preveja o resultado e adicione justify-content: flex-end ao contêiner.

Agora compare com justify-content: space-between. A primeira opção move o grupo; a segunda distribui o espaço disponível entre os itens. Experimente um contêiner estreito e um largo. Explique qual versão você escolheria para três botões que devem permanecer próximos uns dos outros. O resultado visual é mais importante do que memorizar um único valor.

Exercício 2: mantenha a mesma instrução, altere o eixo

Reutilize esse contêiner, adicione flex-direction: column, defina height: 12rem e mantenha justify-content: flex-end. Os itens agora se agrupam na parte inferior. Sua declaração não se tornou um comando de "mover para a direita": ela ainda funciona ao longo do eixo principal, que você alterou.

Em seguida, adicione align-items: flex-start. Compare o arranjo antes e depois dessa adição. Com a direção da esquerda para a direita especificada, os itens se alinham para a esquerda no eixo transversal. Remova a declaração e observe novamente o comportamento de alongamento padrão.

Escreva uma breve explicação de ambas as alterações sem usar "simplesmente funciona". Por exemplo, identifique o eixo, o espaço livre e o grupo que está sendo posicionado. Se você não conseguir explicar um resultado, reduza o exemplo a dois itens e altere apenas uma declaração por vez. Este é o hábito a ser retomado no jogo.

Em seguida, diferencie uma trilha da grade de seu limite.

O posicionamento na grade usa linhas que circundam linhas e colunas. Cinco colunas explícitas têm seis linhas de limite. Um item colocado da linha da coluna 3 à linha 5 abrange duas colunas, não três. Consulte a Introdução à Grade de MDN para a distinção entre trilhas, células e linhas.

Em Grid Garden, leia os limites inicial e final antes de tentar uma posição. Em sua própria página, desenhe ou rotule os limites se contar os espaços for confuso.

Exercício 3: coloque um cartão entre duas linhas

Construa um tabuleiro de cinco colunas e coloque um cartão nele:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Preveja onde o cartão aparecerá antes de abrir a página. Em seguida, faça com que ele ocupe todo o tabuleiro, alterando apenas sua posição na coluna. Com as cinco colunas explícitas acima, grid-column: 1 / 6 vai da primeira à última borda.

Finalmente, altere o texto para uma frase muito mais longa e reduza a largura da janela do navegador. A regra de posicionamento pode permanecer correta, enquanto a apresentação de altura fixa do cartão se torna inadequada para o seu conteúdo. Resolver um exercício de jogo ensina uma parte do layout; construir uma página utilizável requer também a verificação do conteúdo.

Use o progresso do jogo como feedback, não como prova de domínio.

Após um exercício bem-sucedido, altere uma das premissas: a direção, o número de itens, a largura disponível ou o comprimento do texto. Preveja o resultado antes de olhar. Se você conseguir adaptar a ideia e explicar a mudança, terá aprendido mais do que uma resposta básica.

Ao retornar a um jogo, verifique se está abrindo a mesma versão e o mesmo ambiente de navegador. Os favoritos da conta Cozcade identificam os jogos que você deseja revisitar; eles não garantem que o progresso da lição interna de um jogo seja transferido entre dispositivos. Evite excluir dados armazenados do site enquanto investiga o progresso e use um recurso de exportação explícito somente se esse jogo específico o fornecer.

Continue com o guia de correspondência

Use o Guia do Sapo para praticar eixos e alinhamento e o Guia Grid Garden para questões de posicionamento. Se quiser outro tipo de prática posteriormente, navegue pelos jogos de aprendizagem.

Os exercícios acima foram escritos para este artigo. As páginas de referência foram verificadas em 11 de outubro de 2026. Nossas verificações de jogabilidade gravadas abrangem um pequeno número de interações em desktops, não a conclusão de todos os níveis ou um curso completo para dispositivos móveis. Este artigo ensina uma sequência prática; ele não concede uma qualificação nem substitui o teste de suas próprias interfaces.

Jogos que você pode jogar no Cozcade

Flexbox FroggyGrid Garden