Pinterest Style Layout with CSS, but stacked horizontally instead of vertically [duplicate]

Question

I'm trying to create a pinterest style layout without using Packery or any JS. I've tried using CSS3 columns, but they stack vertically.

See the fiddle here , https://jsfiddle.net/2otpzbgt/1/

column-count: 3;

is what I've used and the cards are appearing as 1, 6, 11 and so on. Is it possible to display as 1, 2, 3??

The purpose I'm trying to solve is a grid layout with dynamic content where images sizes (height) will vary (similar to pinterest), but packery can arrange only if height of the image is known before hand. I'm lazy loading images and fetching cards as you scroll.

Thanks!

Answer 1

delete the column-fill: auto; and your problem is solved