CODEWITHSUNDEEP
cssmasonrycss-multicolumn-layout
glennreyes
glennreyes

Reputation: 2349

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?

Upvotes: 2

Views: 3477

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371221

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

Upvotes: 4

Related Questions