Search code examples
cssmasonrycss-multicolumn-layout

CSS columns not working with images

I have four images with different heights and I would like to do a masonry-like column grid using CSS columns. The following CodePen example doesn't fill the third column when setting columns to 3:

https://codepen.io/glennreyes/pen/pwjOmy

.columns {
  columns: 3;
}
<div class="columns">
  <img class="image" src="http://lorempixel.com/400/400" alt="" />
  <img class="image" src="http://lorempixel.com/400/500" alt="" />
  <img class="image" src="http://lorempixel.com/400/600" alt="" />
  <img class="image" src="http://lorempixel.com/400/400" alt="" />
</div>

I want three images at the top and the fourth image to one column underneath. What am I missing to fill the content from top/left to bottom/right in a masonry style correctly?

Solution

  • It appears that the source of the problem is the display value of the images.

    Images are, by default, display: inline.

    If you switch them to display: block, the column property works.

    revised codepen