Estilo Masonry apenas com CSS3

Masonry apenas com CSS3

Neste tutorial você vai aprender a aplicar uma grid no estilo Masonry apenas com CSS3, sem a necessidade de bibliotecas JavaScript ou qualquer outro código.

O problema com este modelo é que o layout só irá funcionar perfeitamente em navegadores mais novos, excluindo totalmente IE8 e IE9, e demais que não suportam as propriedades “column”.

Este tipo de grid pode ser encontrada em sites como o Google Keep ou no Pinterest, onde os elementos ficam alinhados perfeitamente na vertical e horizontal.

Se você é uma pessoa que gosta de modernidade, seguem abaixo as instruções. Se precisar de suporte para navegadores mais antigos, siga nosso tutorial anterior:

Caso queira visualizar uma demonstração, acesse o link abaixo:

Vamos ver os códigos:

O HTML

<div id="container" class="cols">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box one"></div>
    <div class="box three"></div>
    <div class="box two"></div>
    <div class="box five"></div>
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box six"></div>
    <div class="box three"></div>
    <div class="box two"></div>
</div>

O CSS3

#container {
    width: 100%;
    max-width: 100%;
    margin: 1% auto;
}
.cols {
    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;
}
.box {
    margin-bottom: 20px;
}
.box.one {
    height: 200px;
    background-color: #d77575;
}
.box.two {
    height: 300px;
    background-color: #dcbc4c;
}
.box.three {
    background-color: #a3ca3b;
    height: 400px;
}
.box.four {
    background-color: #3daee3;
    height: 500px;
}
.box.five {
    background-color: #bb8ed8;
    height: 600px;
}
.box.six {
    background-color: #baafb1;
    height: 200px;
}

Note que não é necessário utilizar as classes de “one” a “six”, elas estão presentes apenas pelo fato dos itens de nosso exemplo não possuírem conteúdo. Resumindo, a altura pode ser criada de maneira automática, apenas com o conteúdo dentro dos itens.

Concluindo

Este é um estilo moderno que irá ajudar o desenvolvedor a alinhas conteúdo de maneira correta na vertical e horizontal, resolvendo o problema que ocorre quando utilizamos float: left;  ou display: inline-block; .

Deixe a sua opinião nos comentários.

Até o próximo!

/2 Comentários/por