CSS3 column not filling width as expected and elements are positioned confusedly

Question

I am having this first contact with the column rule on CSS trying to create a Pinterest-like layout and found it a little weird. I must be doing something wrong, but the results aren't as expected.

First thing is: depending on the number of child elements, the last column breaks almost entirely (yes... maybe the first or second row will be alright) and each elements goes to the bottom of the previous column.

Then a weird and huge margin is created below the last row. Somehow it's like there was another hidden row at the end (though there is not).

And finally, it seems that the columns are filled first or something like that. The 3rd element goes to the 3rd row and the 8th is at the top.

Depending on the number of elements in the list the columns are filled ok in terms of width (columns fill 100% of width).

Oh and if I remove the column-gap rule, the space at the bottom of the page increases!

Is there a good way to make it always fill width 100% (with N rows as defined at column-count) and the cells to be inserters from left to right first and only then from top to bottom? CSS

#posts{         
        width: 100%;
        overflow: hidden;
        -webkit-column-count: 4;
        -webkit-column-gap: 1.875em; /* 30px */
        -webkit-column-fill: auto;
        -moz-column-count: 4;
        column-gap: 1.875em;
        -moz-column-gap: 1.875em; /* 30px */
        -moz-column-fill: auto;
        column-count: 4;
        column-fill: auto;
    }

.post{                  
    display: inline-block;
    margin-bottom: 1.875em;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

HTML

<section id='posts' class='clearfix'>
    <div class='post'>
        <div class='top' style='background-image: url("http://lorempixel.com/400/300/sports/1")'></div>
        <div class='bottom'>
            <span class='title'>Lorem ipsum sit ament lorem lorem ipsum</span>
            <span class='date'>em 15/08/2014</span>
        </div>
        <span class='category'>Lorem ipsum</span>
    </div>
....
    </section>

Example of an error (there are many, this one appears with columns-count: 4 and 6 items in list)

Answer 1

multiple-columns have yet not fully support. And there are bugs in Chrome. I don't think there is a way to fix it (in my knowledge). You might need to wait until the browser fixed it.

Can I Use #multicolumn Check this link out

Chrome is reported to incorrectly calculate the container height, and often breaks on margins, padding, and can display 1px of the next column at the bottom of the previous column.