Criando uma Galeria de Imagens com CSS GRID
CSS E HTML - Aprenda de forma simples como criar uma galeria de imagens com GRIDPasso 1:
Definindo a estrutura HTML Comece criando a estrutura básica do seu HTML. Vamos usar uma <div> com a class "gallery" e dentro dela, vamos adicionar várias <div> para representar as imagens da galeria.
Por exemplo:
<div class="gallery">
<div class="image">
<img src="imagem1.jpg" alt="Imagem 1">
</div>
<div class="image">
<img src="imagem2.jpg" alt="Imagem 2">
</div>
<div class="image">
<img src="imagem3.jpg" alt="Imagem 3">
</div>
<!-- Adicione quantas imagens você desejar aqui -->
</div>
Passo 2:
Estilizando a galeria com CSS Agora vamos adicionar o CSS para criar a galeria usando CSS Grid. Primeiro, vamos definir a propriedade display: grid; para a classe .gallery para que ela se torne um grid. Em seguida, vamos definir o número de colunas e o espaçamento desejado para as imagens. Você pode ajustar esses valores conforme necessário.
Por exemplo:
.gallery {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 colunas */
gap: 10px; /* Espaçamento entre as imagens */
}
Passo 3:
Ajustando o tamanho das imagens Neste exemplo, vamos definir um tamanho fixo para as imagens usando a propriedade width. Além disso, vamos adicionar o estilo CSS para as <img> dentro das <div class="image">.
Aqui está um exemplo:
.image {
width: 100%;
}
.image img {
width: 100%;
height: auto;
}
Passo 4:
Adicionando responsividade Para tornar a galeria responsiva, podemos usar a função minmax() no grid-template-columns, em vez de definir um valor fixo para o número de colunas. Dessa forma, o grid se ajustará automaticamente conforme o tamanho da tela. Por exemplo:
Por exemplo:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
Passo 5:
Finalizando a galeria Agora você pode executar seu código e ver a galeria em ação!
Lembre-se de adicionar qualquer estilo extra de sua preferência para personalizar ainda mais sua galeria.
Aqui está o código completo em um único arquivo (HTML + CSS):
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}
.image {
width: 100%;
}
.image img {
width: 100%;
height: auto;
}
</style>
<title>CSS Grid Gallery</title>
</head>
<body>
<div class="gallery">
<div class="image">
<img src="imagem1.jpg" alt="Imagem 1">
</div>
<div class="image">
<img src="imagem2.jpg" alt="Imagem 2">
</div>
<div class="image">
<img src="imagem3.jpg" alt="Imagem 3">
</div>
<!-- Adicione quantas imagens você desejar aqui -->
</div>
</body>
</html>
Veja o Resultado:
Criação e Diagramação
