How to remove blocks from a grid?

Navigation
3

I'm trying to do something like the facebook timeline, two columns with multiple posts, the problem is, in some parts a hole opens, the reason is that the bottom block (left) is in the code after the above block (on the right).

WhatIwanttoknowis:whattodotogetthisholeandjoinablockintheotherorignorethatpositioninthecodeandsimplyjoin.

HTML

<divclass="wrapper">
    <article>
        <h3>Título</h3>
        <h6>Informações</h6>
        <p>Texto</p>
    </article>
    <article>
        <h3>Título</h3>
        <h6>Informações</h6>
        <p>Texto</p>
    </article>
    <article>
        <h3>Título</h3>
        <h6>Informações</h6>
        <p>Texto</p>
    </article>
</div>

CSS 

.wrapper {
    width: 100%;
}
.wrapper article {
    float: left;
    width: 49%;
}
    
asked by anonymous 14.07.2014 / 21:33

1 answer

4

You can follow the solution below or you can use Masonry

Here is the CSS solution

CSS 

.wrapper {
    width: 100%;
    max-width: 700px;
    margin: 2em auto;
    -moz-column-count:2;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:2;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 2;
    column-gap: 3%;
    column-width: 30%;
    height: 100%;
}

.wrapper article {
    margin-bottom: 20px;
    background:#e1e1e1;
    display: inline-block;
    width: 100%;
}

The result can be seen in DEMO

    
14.07.2014 / 21:43
Error with calc in Safari! DELPHI MVC (ECB)