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!