Variable height grid layout with horizontal wrapping

[narthur]

I’m trying to achieve this layout using CSS:

https://imgur.com/a/vTsVKX0

This is what I’ve managed to achieve so far:

https://codepen.io/narthur/pen/rPYaeN

At very wide screen sizes, it almost seems like it’s working, except the grid isn’t allowing the outer container to shrink-wrap. And at anything less than very large widths, the whole layout blows up.

How can I achieve this layout using pure CSS?

[Author]

Posts