Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS column-count columns differ in height

CSS column-count columns differ in height

Problem

I'm trying to create a pintrest-like layout of images. The general idea is to use column-count in css to achieve this like in this example.

I have three Columns with a bunch of images, 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.

Problem courtesy of: Erik Honn

Solution

You should try using

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

Source : http://www.w3.org/TR/css3-multicol/#column-fill

Edit :

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.

Solution courtesy of: Romain Braun

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS column-count columns differ in height

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×