Como criar uma galeria em mosaico com CSS sem Javascript e responsivo

Neste tutorial irei ensinar como criar uma galeria de fotos em mosaico assimétrico utilizando apenas CSS sem javascript e ainda sendo responsivo. Sim é possível e é mais simples do que você pensa.

É muito comum encontrarmos diversas soluções de mosaico utilizando Javascript  e libs prontas, Masonry é uma das mais conhecidas. Mas no CSS é possível fazer muita coisa de forma mais leve e de forma criativa chegar a resultados bem parecidos ou até melhores. Com CSS puro acabamos carregando menos código e tendo um site mais leve e rápido. Então vamos lá?

Veja o resultado e o código no JSFiddle

Estude e desenvolva seu HTML e CSS

Comprar

Crie uma página em HTML básica

Utilize o seu editor  para criar uma página simples é a partir dela que vamos construir nossa galeria de imagens mosaico.

Adicione a DIV que será o nosso container de imagens

No código abaixo nós criamos uma <div> com o id grid, e dentro dela colocamos diversas imagens <img> apenas com o src para imagem, repare que algumas imagens possuem a classe span-2 que falaremos mais tarde nesse tutorial. Adicione esse código dentro do body na página criada na etapa anterior.

Código HTML completo

Dando vida ao mosaico com o CSS

Agora vamos dar iníco a criação do arquivo em CSS, você pode fazer da maneira que preferir adicionando um arquivo separado no head ou criando a tag <style> dentro do mesmo arquivo, aqui vamos usar a tag <style> para simplificar.

Começamos adicionando um pequeno código só para tirar as margens e mudar a cor do fundo do documento. Isso não afeta em nada nosso mosaico.

CSS do Container principal

Nossa div que é o container de nossas imagens tem o id grid e vamos utilizar ele no css para definir os estilos do container. Nós utilizaremos o grid layout para fazer nosso mosaico.

Então definimos o display como grid e adicionamos alguns estilos que vão definir o comportamento das imagens dentro do container.

Esse estilo define o tamanho das imagens em linha/horizontal a função. repeat repete o tamanho para um número x de imagens, o auto-fill determina esse tamanho automaticamente e o minmax é uma função que calcula o tamanho respeitando os 300px e ignorando caso as imagens sejam maiores.

Essa linha faz o mesmo  que a anterior porém em colunas/vertical.

Controla um algorítimo de posicionamento automático e a propriedade dense sempre tenta preencher os 'buracos'

Esses estilos definem os espaçamentos entre as imagens em linhas e colunas.

Definindo o estilo das imagens dentro do container

Aqui é mais simples, estamos aplicando um estilo para as imagens dentro do grid. Apenas estamos definindo o tamanho e a altura para 100% e o object-fit faz com que a imagem sempre preencha todo os espaço independente do tamanho dela.

Para finalizar nós criamos uma classe chamada span-2. Esses estilos definem qual é o espaço final que a imagem vai chegar, eu sei é um pouco confuso. Mas entenda o valor span como partes! Abaixo você consegue ver que o span na coluna é 1 ou seja ele ocupa uma parte da horizontal e 2 na vertical. Ou seja todas as imagens que tiverem com essa classe irão ocupar espaços maiores na vertical criando o mosaico.

Quando utilizar a classe span-2?

Aqui é onde você precisará ser criativo. No meu exemplo eu defini manualmente em cada imagem a classe span-2, porém você pode fazer um código seja em PHP ou Javascript que calcule o tamanho das imagens e se a altura da imagem for maior que a largura você deve definir a classe span-2 fazendo com que todas as imagens que são altas ocupem mais espaço no mosaico.

Código Completo

Veja o código no JSFiddle

Estude e desenvolva seu HTML e CSS

Comprar