Layout css com várias divs

[Kadu Oliveira 1]

Pessoal,

 

Estou tentando montar um dashboard igual ao da imagem abaixo, mas não estou conseguindo arrumar as divs conforme o layout da imagem de forma prática.

 

Consegui chegar em algo parecido utilizando margin-left e margin-top na mão para cada div, mas imagino que tenha uma forma melhor de fazer, porque alinhar as divs na mão dá um trabalho imenso.

 

 

 

 

 

 

[rikaschmitt 54]

Existem plugins bem bacanas que fazem esse "mosaico".

 

Alguns que encontrei:

 

http://salvattore.com/

 

http://isotope.metafizzy.co/options.html

 

Esse último eu já utilizei numa listagem de depoimentos. Muito bacana e fácil.

[Kadu Oliveira 1]

Opa! obrigado pela dica, já estou olhando os links e são bem legais esses plugins.

A título de curiosidade, fazer esse mosaico utilizando só o css é possível? Numa forma mais simples da que eu estou tentando?

 

Abraço

[rikaschmitt 54]

Acredito que dê sim, mas pode ser trabalhoso. Esse mosaico será exatamente igual ao da foto? ou os tamanhos dos blocos irão varias de acordo com o conteúdo? Pois dai pode ser mais trabalhoso...

 

Uma alternativa bem "mais ou menos" é utilizar colunas... dai você até consegue criar algo semelhante, mas pode não ter a mesma usabilidade.

 

Dá uma lida: http://www.w3schools.com/css/css3_multiple_columns.asp

[avallon-azevedo 0]

Meu querido,

 

esse efeito que procura chama-se "mansory".

 

Pra consegui-lo, utilize o plugin: http://masonry.desandro.com/

 

A documentação é bem completa e você tem vários tutoriais disponíveis na internet.

 

Abraço!

[Kadu Oliveira 1]

Excelente! Obrigado pela ajuda!