CSS column-count columns differ in height

Question

I'm trying to create a masonry grid of images The general idea is to use column-count in to achieve this example.

I have three columns with a bunch of images, and the CSS and HTML is identical to that in the link. The problem is that the columns won't align properly. The right-most column is often much shorter than the others. Obviously the columns will never align perfectly unless the images are the same size, but the difference is much larger than that. Sometimes the first two column will hold ten images each but the third column is holding only two (with the images being similar sizes), meaning you could easily have moved a few image from the first and second column to the third to get a better alignment. This result seems to go against the idea of column-count.

This also happens in the link above if you change some of the images to much smaller images. Is it simply column-count that is still buggy and shouldn't be used, or is there some trick to stop this from happening?

Edit: Here is the basic CSS (minus lots of basic styling like transitions and stuff, which I have tried to remove to see if they where the culprit).

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 4;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
}

And here is a JSFiddle showing the problem. There are four columns, but in Chrome the third column is shorter than it needs to be, an image could have been moved from the fourth column to make them more even. Note that this example is "not that bad", but the problem can be much larger than this. Sometimes the difference is equal to the size of several images.

Answer 1

You should try using

column-fill: balance;
-moz-column-fill: balance;
-webkit-column-fill: balance;

Source: https://www.w3.org/TR/css-multicol-1/#cf

It doesn't change much about your JSFiddle since columns are filled sequentially with this column-count CSS property, therefore the order of the elements stay unchanged. So if you do have big images first, and then a column made of small images, you may have columns of different sizes.

The column-fill: balance; property cannot do magic since it can't change the order.

Use JavaScript if you want to adapt the order of the elements in order to have columns of (more or less) equal length.

Answer 2

Make sure the direct child items in the column have no padding, margin or border.

IE if using ul and li, make sure the li has no padding, margin or border on it, if you need it put it on a nested element.

I know this is old but I couldn't find this answer anywhere, hope this helps someone :) it sure bugged me!

Answer 3

You may have to use this Javascript

var tallest=0;

$(document).ready(function() {
    $('.pin').each(function(){
        if($(this).height() > tallest)
           tallest = $(this).height();
    });
    $('.pin').css('height', tallest + 'px');
});

ref : Matching column height in 2column layout

Otherwise, just set a static height in class "pin"