Open rachelandrew opened 7 years ago
I believe that this comment is underrated in this thread. I can't help seeing that the behavior of the Packery algorithm is to the usual behavior of float
ing boxes as dense
auto placement is to default (sparse) auto placement in Grid layout. Maybe [css-floats-3] could also be considered a possible approach for this?
This should now be supported with the CSS.layoutWroklet -- Aka Houdini -- in at lease Chrome for now. I have created a pen here that demonstrates this functionality. Because of the way that Codepen works, there is another supporting file found here that is the actual layoutWorklet.
The whole point of the layoutWorklet is so that the W3C doesn't have to come up with a new layout every time it becomes popular.
This spec provides direct access to the layout portion of the JavaScript event loop. Thus making it highly performant.
A clever and recent technique which uses flexbox: https://tobiasahlin.com/blog/masonry-with-css/. (Posting here because it's not been posted yet, and it might be a good workaround for anyone who lands here.)
@OliverJAsh Isn't that the same as what I proposed 2 years ago in this same thread? https://github.com/w3c/csswg-drafts/issues/945#issuecomment-321408900
@Loirooriol Yes, you're right. Apologies.
I've experimented a bit with implementing masonry layout inside a grid container and I've summarized my conclusions in #4650.
I believe that this comment is underrated in this thread. I can't help seeing that the behavior of the Packery algorithm is to the usual behavior of
float
ing boxes asdense
auto placement is to default (sparse) auto placement in Grid layout. Maybe [css-floats-3] could also be considered a possible approach for this?
I think you have a good point.
Currently, float is becoming old and flexbox allow a lot of things to be done, but this masonry layout is lacking in both.
I drawn this to show what people are forgetting about the masonry layout. It's not just a way to automatically place boxes or images where it fit. I think the best way to see that is that it put the following image at the highest point it can get in a column.
What I want to show you there is that box 4 is not necessarily on the left. It's where you get the highest point like I said. Sometimes you can have lot of small images in a row, so making it left to right can't work all the time. Masonry is left to right like always, but in a way it's easier for the user to access informations.
Like this example over there : http://www.castlecodeweb.com/mediaboxes/example/gallery.html Whatever, even if this can make beautiful gallery like this one, another solution is to use justified gallery which is almost the same, but instead of having rows of different height, you have columns of different width which is much simpler in term of coding. https://wexley-demo.squarespace.com/ http://miromannino.github.io/Justified-Gallery/
I'm getting frequent questions about whether Grid can handle a Masonry style layout using auto-placement.
You can see a good example, along with some author use cases here.
Currently the closest you can get with CSS to this type of layout is to use multi-col however the items then flow top to bottom rather than across the rows.
This feels more like a behaviour of flexbox than grid, as the solution is very much based on the size of the items. Opening this in order to record the feature request/use case for future discussion.