Search code examples
cssmasonry

How to create masonry layout using css only?

I want to create masonry layout using css only, i read all tutorial in internet, but they using column property to divide layout, the problem in here is the layout will be display like this (with 1,2,3...is a items).

1|3|5
2|4|6

I want my layout must be:

1|2|3
4|5|6

I want use css only.Please tell me if you have any solution or idea to resolve this problem.

Solution

  • You can use flexbox. See codepen for example, and complete guide to flex box to learn more.

    In order to keep the layout horizontal, adjust the flex-direction to your liking.