Preview

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)

index.html

<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>

styles.css

.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;
}

Pré-visualização (Preview)

Casos de Uso e Recursos (Use Cases & Features)

Dicas de Design e UX (Design & UX)

Guia de Personalização (Customization Guide)

Código de Implementação (Implementation)

Suporte de Navegadores (Browser Support)