2

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
glennreyes
  • 2,281
  • 16
  • 19

1 Answers1

4

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701