Situation: I'm trying to create a blog theme in HTML and CSS and want my posts to fill up a grid. Each of my posts has the same width, but they have different heights. The width of the grid should change with the browser size.
Problem: If I use flexbox to size the posts, they get arranged neatly in rows, which is good, but because the posts have different heights, there is whitespace between some posts.
If I use CSS columns (varying the number of columns using @media), the grid gets filled up very nicely and everything rescales nicely, but the post order gets messed up, because columns are filled top-to-bottom.
Using Masonry.js didn't work either, because the posts don't scale / aren't responsive. Also it requires a set number of columns.
Question: Is there any way to create a tightly-packed grid (sort of like Pinterest) that fills left-to-right and supports changing the column width and amount of column if the browser width changes? Preferably, I'd like to find a way to do it using only CSS.
