Hacker News Reader

Comment by IgorPartola | Hacker News Reader

Is it now possible to do a responsive CSS-only layout a la Masonry/Pinterest, with the correct order of elements using this?:

    [1]  [2]  [3]
    [4]  [5]  [6]

View on HN

No, you can't, because the position of each item depends on all the previous items.

Flexbox only deals with a single row at a time, whereas masonry doesn't really have a notion of a row (given the 4th item in each column can be at very different places, depending on the sizes of the items above). Grid requires you to bind things to an actual grid, so you still can't do masonry (for similar reasons). The closest you can do is using multicol, but that's then top-to-bottom then left-to-right instead of left-to-right then top-to-bottom.

Note that this is mostly thinking about unequal height items (which is the common case of masonry); equal height you can do with floats yet alone more recent layout modes.

Thanks for the rundown. That’s unfortunate. This might be another case where browsers will eventually implement yet another layout method (how many are we up to now with floats, tables, columns, flex box, grid?) as soon as these layouts are replaced by something new.

Masonry is something somewhat fundamentally unique given it relies on how things flow across both dimensions in a specific way; there's been some vague talk about extending Grid to support it (but nobody's actively working on things like that for now, even subgrids have gone a bit quiet), but probably more practically we'll stick to doing complex layout modes with a limited scope in JS (and hopefully soonish with Houdini and avoid much of the costs associated with current ways of doing layout in JS), given solving things like Masonry in a general way is hard (and relatively unclear that the gain is much for the amount of work involved).

As for number of layout modes, it depends on how you count. Roughly: block, inline, table, positioned, flexbox, and grid. Multicol doesn't actually introduce a new layout mode, it just functions in a similar way to fragmentation when doing layout for printed media, just fragmenting across columns instead of across pages.

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?

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.

Isn't that just a wrap?

    flex-wrap: wrap;

No, wrap will position (flex-start, center, flex-end, and reverse) in the next row, it won’t fill any gaps from the neighboring rows.

Sort of https://codepen.io/akrigline/pen/qVaWQo

You can't simulate the way items can extend into other rows easily with CSS Grids, but the default behavior for children of a display:grid element is to flow horizontally into cells until they have to start wrapping.

I had to implement a masonry layout recently. The answer is no, however it is actively being explored at the W3C - https://github.com/w3c/csswg-drafts/issues/945

I did this a couple of months ago: https://codepen.io/balazs_sziklai/pen/mOwoLg

What's the correct order of elements?

The second element should be to the right of the first, not below it.

What about the rest? Does it matter how tall the elements are?

My point is just that, as described, your problem is woefully underspecified.

Reply on news.ycombinator.com