Why it is not displayed in 3 columns as specified in column-count?

.photo-gallery { column-count: 3; column-gap: .3em; } .photo-item { display: inline-block; margin: 0 0 .3em; width: 100%; } 
 <div class="photo-gallery"> <div class="photo-item"> <a href="#"><img src="https://picsum.photos/600/400" alt="image"></a> </div> <div class="photo-item"> <a href="#"><img src="https://picsum.photos/600/400" alt="image"></a> </div> <div class="photo-item"> <a href="#"><img src="https://picsum.photos/600/400" alt="image"></a> </div> <div class="photo-item"> <a href="#"><img src="https://picsum.photos/600/400" alt="image"></a> </div> </div>

  • Add one more block, it will be on 3 - Bert
  • Yes, but you need to have any number of photos evenly spaced. That's where the problem is, normally only 5 or more objects are distributed. - Sergey Mironov
  • Option with flexbox not considered? - Deonis
  • Yes, most likely you will have to look for another method for solving the problem. - Sergey Mironov

1 answer 1

The CSS3 Column specification requires that the column height be aligned: that is, the browser automatically sets the maximum column height so that the height of the content in each column is approximately the same. MDN

Since you don’t have enough content for three columns in the browser’s opinion, it doesn’t create three columns.

  • I see, thanks! - Sergey Mironov
  • @ Sergey Mironov, if this answers your question, then accept the answer. - Sasha Omelchenko