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.

Directional

I don't have an answer but I can tell you column-count isn't buggy, it is a w3c candidate recommandation since 2011. w3.org/TR/css3-multicol – Gley

Good do know. Perhaps I don't understand how it is intended to work, but it seems strange that this is the intended behavior. In some cases it won't even use all columns, it skips the last one completely in favor of making the others even. – Directional

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.

Gley

Thanks for the answer, but balance is the default column-fill value so setting it doesn't change anything. Try it in the fiddle above and you will see. – Directional

Wait, my bad. I had it set to auto, not nothing. Still doesn't seem to change anything though :( – Directional

Indeed... Can't manage to find the solution yet. You can be sure you won't get a perfect alignment though, not as good as javascript, because it's the browser who calculates how to fill the columns. Also you may experience a big difference between browsers. – Gley

Well there is no such thing as perfect when things are of different size, but I would settle for "not half the screen" in difference. :) W3Schools claims that column-fill is not properly supported by any browser yet, so I guess it might be a case of columns working, but not all the settings. – Directional

I think I understood. Nothing is actually going wrong about this. The columns are filled sequentially, so the order of the elements stay unchanged. You have massive images and in the last columns small ones. So whatever you try to do, if you can't change the order of the image, you can't get a better result ! – Gley

Ah, makes sense. Tried it a bit in the fiddle and it seems to be like that. That would mean that the column-fill option is not working (which supports what is stated in W3Schools) since "balance" is supposed to fix portion them out instead of just filling as it goes. – Directional

Put that in your answer and I will accept it (so we don't fool someone else who looks at it and doesn't read the comments). – Directional

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!

Methodism

Yes, this solved my problems! In my case <LI> margin was the issue. – Swop

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"

Bibulous

Thanks for the input, but that would give a totally different layout (which can be created without using javascript). – Directional

Sorry, it seems I misunderstand your point. I think you want the same height of all columns, and to set column-fill: balance; doesn't help whit this point, so I suggested you this Javascript. Thank you for your comment. – Bibulous