programandoai

Exercício: galeria em grade responsiva

Transforme uma fileira de fotos soltas numa grade de verdade, com Grid.

Estudar esta lição interativa →

A .galeria no CSS do editor está com display: block e fotos em inline-block. Ajuste para display: grid, com grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) e algum gap.

.galeria precisa de display:grid, colunas que se ajustam à largura (grid-template-columns com repeat + auto-fit ou auto-fill + minmax) e gap maior que 0.
.galeria{
  display: block;
}
.foto{ background:#7c3aed; height: 70px; width: 70px; display:inline-block; margin: 4px; }

🧩 Este é um exercício com correção automática — abra no app para completá-lo e verificar.

← Voltar ao índice do curso