Galeria de imagens CSS
Dropdowns aninham menus sob links. Uma galeria de imagens é outro componente: uma grade calma de miniaturas que as pessoas percorrem com o olhar. Iguale o tamanho dos thumbs, deixe a linha quebrar, recorte com object-fit e deixe grades responsivas profundas para os módulos Flexbox e Grid seguintes.
Kit de ferramentas da galeria
📊 Galeria de imagens em um olhar
| Peça | Trabalho do dia a dia |
|---|---|
| Lista da galeria | Wrapper que organiza thumbs em linha que quebra ou em grade |
| Tamanho do thumb | Largura/altura compartilhadas para o conjunto ficar uniforme |
object-fit: cover |
Preenche a caixa do thumb sem esticar feio |
| Gap / margin | Espaço para respirar entre imagens |
| Sinal de hover | Feedback suave sem saltar o layout |
| Legenda | Opcional com figure/figcaption para sentido |
Use elementos <img> reais com alt útil. Sprites só decorativos ficam em outro lugar — galerias costumam ser conteúdo.
Galeria flex com wrap
Um contêiner flex com wrap transforma uma lista de thumbs em uma linha responsiva que cai na próxima. Gap mantém o espaçamento honesto.
.gallery {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
Caixa de thumb compartilhada + cover
Dê a cada imagem a mesma caixa e depois recorte com cover para que retratos e paisagens compartilhem um ritmo.
.gallery img {
width: 160px;
height: 120px;
object-fit: cover;
display: block;
border-radius: 0.35rem;
}
Figures e legendas
Quando o rótulo importa, envolva a imagem em figure e adicione figcaption. Mantenha o texto da legenda curto sob o thumb.
.gallery figure {
margin: 0;
width: 160px;
}
.gallery figcaption {
margin-top: 0.35rem;
font-size: 0.85rem;
color: #555;
}
Feedback de hover suave
Escureça ou clareie um pouco no hover. Evite grandes scales que empurram vizinhos, a menos que planeje o empilhamento com cuidado.
.gallery a:hover img {
opacity: 0.88;
outline: 2px solid #0b5fff;
outline-offset: 2px;
}
Um hábito calmo de galeria
Caixas de thumb iguais, wrap + gap, object-fit: cover, alt significativo. Prefira as lições Flex/Grid seguintes para masonry responsivo avançado — não confunda isto com menus dropdown.
.gallery { /* wrapping track */ }
.gallery__item { /* each thumb cell */ }
.gallery__img { /* the img */ }
.gallery__cap { /* optional caption */ }
Experimente você
- Monte uma lista
.galleryflex wrap de imagens linkadas. - Defina largura/altura compartilhadas e
object-fit: cover. - Adicione
figure/figcaptionem um item. - Estilize um hover suave com opacidade ou outline.
- Escreva uma frase: o que Grid ensinará melhor que este esboço com wrap?
Erros comuns
- Misturar alturas aleatórias sem caixa compartilhada ou object-fit
- Gap zero para os thumbs colarem
- Tratar galerias como menus dropdown aninhados
- Absolute em cada thumb numa pilha frágil
altvazio em fotos com significado
Resumo
- Galerias são conjuntos de miniaturas iguais que quebram linha
- Tamanho compartilhado +
object-fit: covermantém o ritmo organizado - Flex wrap + gap é um layout inicial calmo
- Legendas e sinais de hover ficam opcionais e leves
- Módulos Flexbox/Grid aprofundam galerias responsivas depois
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo