<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galeria de Imagens</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.gallery img {
width: calc(33.33% - 10px);
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://picsum.photos/200/300" alt="Imagem 1">
<img src="https://picsum.photos/200/300" alt="Imagem 2">
<img src="https://picsum.photos/200/300" alt="Imagem 3">
<img src="https://picsum.photos/200/300" alt="Imagem 4">
<img src="https://picsum.photos/200/300" alt="Imagem 5">
<img src="https://picsum.photos/200/300" alt="Imagem 6">
<img src="https://picsum.photos/200/300" alt="Imagem 7">
<img src="https://picsum.photos/200/300" alt="Imagem 8">
<img src="https://picsum.photos/200/300" alt="Imagem 9">
<img src="https://picsum.photos/200/300" alt="Imagem 10">
<img src="https://picsum.photos/200/300" alt="Imagem 11">
<img src="https://picsum.photos/200/300" alt="Imagem 12">
</div>
</body>
</html>
Html
Explicação:
display: flex; e flex-wrap: wrap;: Define o container como um flexbox e permite que as imagens sejam quebradas em novas linhas se necessário.
justify-content: space-between;: Distribui as imagens uniformemente com espaço entre elas.
width: calc(33.33% - 10px);: Define a largura das imagens para ocupar 1/3 da largura total, subtraindo 10px para o espaçamento.
margin-bottom: 10px;: Adiciona um espaçamento entre as linhas de imagens.
https://picsum.photos/200/300: Substitua esses links por suas próprias imagens.
Como usar:
Salve o código como um arquivo HTML (por exemplo, galeria.html).
Abra o arquivo em seu navegador.
As 12 imagens de exemplo serão exibidas em 3 linhas, com 3 imagens por linha. Você pode substituir as imagens de exemplo por suas próprias imagens.