Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

I really like the general look and feel of masonry/waterfall layout, maybe it's because I grew up reading physical newspapers (and still do), but to me a columnar layout is just an intuitive way to divide up a page.

I just wish there was an alternative to the default masonry ordering, which afaik is a simple rule that goes sth like 'place the next item in whichever column it can go up highest'. This means that the left-to-right order is really juggled from the second row onwards. What I imagine would be really nice is if there was a layout that preserves more of the left-to-right (or right-to-left, if that's your preferred direction) reading flow. Something like 'put the next item one column to the right of the previous item (or in the leftmost, if you were at the rightmost), unless you can put a second item in the same column without the new bottom going too far below the bottom border of the column to its left'. This would be more flexible than strictly going left-to-right (which would also mess up alignment) and would reatin some meaning of the left-to-right reading direction.

I know it won't be possible to accommodate every possible formula one could prefer for masonry, but if you have content where the ordering matters at least a bit (maybe not for Pinterest, but for a journal eg it would), then I really think sth like this would be a more sensible default than the classic masonry rule.



I'd only use a masonry layout for something where there's no "clear" order anyway. I wouldn't use it for chronologically sorted images.


It's the left-to-right ordering that's the problem. I'm fairly sure there's no way to order things left-to-right in this layout without inevitably having to skip around haphazardly.

In a magazine-style layout, wouldn't you read the columns top-to-bottom first, then left-to-right? You can accomplish that already in CSS with either 'columns' or vertical flexbox.

Another issue with this 'masonry' layout is the ragged edge at the bottom. In a magazine that would presumably be justified -- again something you can do with columns or flex.

On the web, I guess there's a hidden assumption that you'll have endless scrolling content, so it doesn't matter what the bottom of the page looks like? If so, that's not necessarily something that should be encouraged.


The main use for this will presumably be infinite scroll where columns doesn't work because it'd break all expectations when scrolling.


something like:

    {
       /* Move element a maximum of 2 columns left or right on update */
       grid-template-max-horizontal-shift: 2 col;
    }


You could run into issues where you don't have enough content to plug the holes this way though, right?

For example if there's a gap that needs filling that Is 3 spaces away




Consider applying for YC's Summer 2026 batch! Applications are open till May 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: