Masonry Layout in CSS3?

Answer 1

For boxes of the same size:

If you're using flexbox, you'll want to use flex-direction: row; and flex-wrap: wrap;

I forked your JSFiddle. All flex-box properties I added are prefixed with -webkit- only

References:

• A Complete Guide to Flexbox
• How do I implement a multi-line flexbox?

---

For boxes of multiple sizes:

You'll need a 'masonry' layout. This article should help you with this issue. The last section is entitled 'Pure CSS'; if you want to avoid JavaScript plugins, that should be what you want.

Unfortunately, pure CSS is only able to make top-to-bottom left-to-right layouts. For left-to-right top-to-bottom layouts, you'll need JavaScript. Check out the jQuery suggestions in the article above.

If you want to do this with pure JavaScript (without jQuery), check out this masonry library.