I've been experimenting with creating a masonry grid of images using column-count to achieve a similar layout to this example.
Despite following the CSS and HTML structure outlined in the link, I've encountered an issue where the columns don't align properly. The right-most column often ends up much shorter than the others, even when the images are of similar sizes. This discrepancy goes beyond the expected variation due to image sizes, with the third column sometimes only holding a couple of images compared to ten in the first and second columns. This seems to contradict the idea of using column-count for achieving a balanced layout.
A similar problem occurs in the linked example when smaller images are used. Is the column-count feature still buggy and unreliable, or is there a workaround to prevent this misalignment from happening?
Edit: Below is the basic CSS code (with styling removed) that I've been using:
#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;
}
Here is a JSFiddle example illustrating the issue. Despite having four columns, Chrome sometimes shows the third column as shorter than expected. It's clear that a better alignment could be achieved by rearranging the images across the columns. Although this example is not the worst case, sometimes the misalignment can be significant, impacting multiple images.