Hacker News Reader

I too would like to know! I have yet to find a way display flex rows that are different heights and that align left to right. It seems the only options are to align by column, or use Masonry.js which seems like overkill. Even Bootstrap 4 only supports column layout.

Anyone been able to accomplish this with CSS-Grid or Flexbox?

View on HN

From what I can tell, it hasn't been done with Flexbox alone. To get the order right, you have to specify a fixed height for each element, making it non-responsive at best. I am wondering if grid somehow helps.

There is also of course the order property, which with some cleverness can re-order elements from 1, 2, 3, 4, 5, 6 to 1, 4, 2, 5, 3, 6. You'd have to get awful clever with it though to figure out how to do this right, so still might rely on JS.

Reply on news.ycombinator.com