Galeria em CSS Grid Responsiva

Ao combinar display: grid com grid-template-columns: repeat(auto-fit, minmax(..., 1fr)), é possível criar uma galeria de imagens responsiva onde o número de colunas se ajusta automaticamente de acordo com a largura da tela, dispensando o uso de media queries (@media).

Pré-visualização (Preview)

Casos de Uso e Recursos (Use Cases & Features)

• Portfólios e galerias de fotos: Ideal para organizar imagens de forma impecável.
• Lista de produtos de e-commerce: Também se aplica perfeitamente a layouts de cartões de produtos.
• Sem necessidade de media queries: O uso de auto-fit e minmax simplifica significativamente o código e melhora a manutenibilidade.

Dicas de Design e UX (Design & UX)

• Proporção fixa: A combinação de aspect-ratio: 1 / 1 e object-fit: cover garante um grid visualmente agradável e perfeitamente quadrado, mesmo que as proporções originais das imagens variem.
• Efeito hover: Adiciona uma sutil animação de flutuação (transform: translateY e scale) acompanhada de sombras realçadas ao passar o mouse sobre a imagem, indicando intuitivamente tratar-se de um elemento interativo.
• Transição suave: Emprega uma curva de animação natural e orgânica utilizando cubic-bezier.

Guia de Personalização (Customization Guide)

• Alterar a largura mínima: Ao modificar o valor 200px na função minmax(200px, 1fr), você ajusta o tamanho mínimo de cada item. Valores maiores resultarão em menos itens por linha.
• Alterar a proporção: Adapte o layout à sua necessidade definindo, por exemplo, 16 / 9 (paisagem) ou 3 / 4 (retrato).

Código de Implementação (Implementation)

<div class="gallery">
<img src="/gallery/1.png" alt="Gallery image 1" class="gallery-item" />
<img src="/gallery/2.png" alt="Gallery image 2" class="gallery-item" />
<img src="/gallery/3.png" alt="Gallery image 3" class="gallery-item" />
<img src="/gallery/4.png" alt="Gallery image 4" class="gallery-item" />
<img src="/gallery/5.png" alt="Gallery image 5" class="gallery-item" />
<img src="/gallery/6.png" alt="Gallery image 6" class="gallery-item" />
</div>

.gallery {
display: grid;
/* Ajusta automaticamente o número de colunas para preencher o contêiner, não sendo menor que 200px */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Sempre manter a forma quadrada */
aspect-ratio: 1 / 1;
/* Cortar a imagem para que a proporção não seja distorcida */
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.gallery-item:hover {
/* Efeito de leve flutuação ao passar o mouse */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Suporte de Navegadores (Browser Support)

• As propriedades display: grid e aspect-ratio são totalmente suportadas por todos os navegadores modernos (Chrome, Firefox, Safari, Edge).
• Navegadores legados (como o IE11) não possuem suporte, sendo recomendado adicionar um fallback, se estritamente necessário.