Masonry apenas com CSS3

Layout Masonry apenas com CSS3

Vejamos então como montar um layout Masonry apenas com CSS3.

Vou passar para vocês uma solução que na verdade comecei usando para criar colunas em textos.

Com o COLUMN-COUNT é possível essa façanha. Neste link você também encontra um pouco mais sobre ele.

Sem enrolação né Ricardo…

Com vocês um “Layout Masonry apenas com CSS3”

Então vamos lá.

Um código HTML para vocês. Coloquei os comentários para entenderem o que fiz.

<div class="largura"><!-- Div que adiciona a largura da página -->
    <section class="masonry"><!-- Indico que aqui terá o layout desejado -->
        <article class="item"><!-- Aqui ficam nossos artigos (posts) -->
            <header><!-- Cabeçalho do artigo -->
                <img src=""><!-- Imagem destacada -->
                <h1></h1><!-- Título do artigo -->
            </header>
            <content></content><!-- Conteúdo do artigo -->
            <footer></footer><!-- Rodapé do artigo -->
        </article>
    </section>
</div>

Agora o CSS que faz o que quermos.

.masonry { /* Nosso conteúdo em colunas (section) */
    column-count: 4; /* Indicamos quantas colunas queremos */
    column-gap: 1em; /* Espaço entre as colunas */
}

.item { /* Nossos Artigos (article) */
    display: inline-block; /* O segredo para ficar bem formatada as divisões */
    width: 100%; /* Ocupar a largura inteira da coluna */
}

Isso é tudo de que precisamos.

Todo o restante é perfumaria.

Ei, e o IE? Como fica?

Pois é, tem ele…

Resolvendo o problema.

Como “CSS columns” são suportados apenas por navegadores modernos, devemos usar uma solução alternativa com JavaScript, assim ele funcionará em navegadores antigos. Nós podemos adicionar um retorno ao nosso alvenaria, fazendo uso de jQuery Masonry plugin.

Podemos chamar o  jQuery Mansonry para se entender com o IE, veja:

<!--[if lte IE 9]><script src="masonry.pkgd.min.js"></script><![endif]-->

Para ver esta solução em ação clique no link abaixo.

Deixei um exemplo de como seria.

Vocês podem copiar e usar como base para aplicações mais elaboradas.

ACESSAR EXEMPLO AQUI

Espero que tenham gostado do conteúdo.

Faço isso com muita dedicação.

Estou tentando deixar as coisas o mais simples possível. Para que tanto os iniciantes quanto os que já tem mais tempo de estrada possam aproveitar.

Um forte a braço e sucesso.

Como manter o foco

Como manter o foco

Encontrei este "Pin" com algumas dicas de como manter o foco e quero compartilhar com você é bem bacana. De…
Repensar

#8 – Desenvolvendo um layout de site – Repensar

Vamos repensar? Sabe quele novo elemento ou informação nova que pensamos inserir? Será mesmo necessário? Na maioria dos casos, a resposta…
#7 - Desenvolvendo um layout de site - Dividir o layout

#7 – Desenvolvendo um layout de site – Dividir o layout

Para começo de conversa,  vamos deixar uma coisa bem clara - não sou o senhor da razão. Acredito que muitos…

#6 – Desenvolvendo um layout de site – Cores parte 2

Neste post "Cores parte 2" darei sequência ao assunto. Já sabemos de sua importância e que é um desafio enfrentado…

Facebook Anúncios com novas regras

Facebook Anúncios com novas regras: antes de qualquer coisa devo dizer que estas novas regras entraram em vigor em 08/06/2016. Um…

Criatividade, você realmente é criativo?

O que você entende por criatividade? Você se considera criativo? Para quem não sabe eu curto muito todo movimento para melhorar…