5 ms·

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] [

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]

sorrymate 9y ago
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?
- IgorPartola 9y ago
  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.
akrigline 9y ago
Sort of https://codepen.io/akrigline/pen/qVaWQo 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.
gsnedders 9y ago
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.
- IgorPartola 9y ago
  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.
  - gsnedders 9y ago
    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.
couchand 9y ago
What's the correct order of elements?
- IgorPartola 9y ago
  The second element should be to the right of the first, not below it.
  - couchand 9y ago
    What about the rest? Does it matter how tall the elements are? My point is just that, as described, your problem is woefully underspecified.
mmanfrin 9y ago
Isn't that just a wrap? flex-wrap: wrap;
- deno 9y ago
  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.
dbbk 9y ago
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 https://github.com/w3c/csswg-drafts/issues/945
28inch 9y ago
I did this a couple of months ago: https://codepen.io/balazs_sziklai/pen/mOwoLg https://codepen.io/balazs_sziklai/pen/mOwoLg

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]

sorrymate 9y ago

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?

IgorPartola 9y ago
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.

akrigline 9y ago

Sort of https://codepen.io/akrigline/pen/qVaWQo 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.

gsnedders 9y ago

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.

IgorPartola 9y ago
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.
- gsnedders 9y ago
  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.

couchand 9y ago

What's the correct order of elements?

IgorPartola 9y ago
The second element should be to the right of the first, not below it.
- couchand 9y ago
  What about the rest? Does it matter how tall the elements are? My point is just that, as described, your problem is woefully underspecified.

mmanfrin 9y ago

Isn't that just a wrap? flex-wrap: wrap;

deno 9y ago
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.

dbbk 9y ago

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 https://github.com/w3c/csswg-drafts/issues/945

28inch 9y ago

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