What: When using CSS columns, the content doesn’t always line up at the top of each new column. The more columns you have, the more likely you are to run into this problem, especially if you’re using column-fill: balance. And the problem seems to happen in Chrome-based browsers, in Safari and in browsers on iOS.
The two problems I’ve been having is to get all of the content to actually align at the top and to truly “balance”, meaning that it doesn’t leave the last column(s) empty when there is more content to fill it with.
I’ve been using columns for no-CSS masonry photo galleries. Not what they are intended for but it works and it means I don’t have to load any JavaScript (on a page that is already loading a lot of photos) to create the masonry effect.
How: The CSS I’ve ended up with is below, with comments for clarification. Not all of it is perhaps needed, but that would need more testing than I currently had time for. Amendments welcome.
.gallery {
column-count: 4; /* Can be any number */
column-gap: 0.5rem;
column-fill: balance; /* This is the default though, so unnecessary */
/* The below is only needed if you're using an <ul> */
margin: 0;
list-style: none;
}
.gallery-item {
display: block; /* This helps with alignment in Chrome */
/* The below helps with alignment in Safari and other browsers on iOS */
page-break-inside: avoid;
break-inside: avoid;
-webkit-column-break-inside: avoid;
/* I used to also add here a
margin-bottom: 0.5rem;
to create some space between the images but since that's not
"inside", I now use: */
padding-bottom: 0.5rem;
}Your markup can be one of the below:
<ul class="gallery">
<li class="gallery-item"><img src="img/photo-1.jpg" /></li>
<li class="gallery-item"><img src="img/photo-2.jpg" /></li>
<li class="gallery-item"><img src="img/photo-3.jpg" /></li>
<li class="gallery-item"><img src="img/photo-4.jpg" /></li>
<li class="gallery-item"><img src="img/photo-5.jpg" /></li>
<li class="gallery-item"><img src="img/photo-6.jpg" /></li>
<li class="gallery-item"><img src="img/photo-7.jpg" /></li>
<li class="gallery-item"><img src="img/photo-8.jpg" /></li>
<li class="gallery-item"><img src="img/photo-9.jpg" /></li>
<li class="gallery-item"><img src="img/photo-10.jpg" /></li>
<li class="gallery-item"><img src="img/photo-11.jpg" /></li>
<li class="gallery-item"><img src="img/photo-12.jpg" /></li>
</ul>Or:
<div class="gallery">
<figure class="gallery-item"><img src="img/photo-1.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-2.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-3.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-4.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-5.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-6.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-7.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-8.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-9.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-10.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-11.jpg" /></figure>
<figure class="gallery-item"><img src="img/photo-12.jpg" /></figure>
</div>If you’re using columns for text content, this may also be interesting: Always include Widows & Orphans