Nenhum produto encontrado nessa seleção.
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!