search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.42k stars 652 forks source link

[css-grid][css-flexbox] Pinterest/Masonry style layout support #945

Open rachelandrew opened 7 years ago

rachelandrew commented 7 years ago

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.

SelenIT commented 5 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 floating 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?

MrGrigri commented 5 years ago

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.

MrGrigri commented 5 years ago

This spec provides direct access to the layout portion of the JavaScript event loop. Thus making it highly performant.

OliverJAsh commented 5 years ago

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.)

Loirooriol commented 5 years ago

@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

OliverJAsh commented 5 years ago

@Loirooriol Yes, you're right. Apologies.

MatsPalmgren commented 4 years ago

I've experimented a bit with implementing masonry layout inside a grid container and I've summarized my conclusions in #4650.

Nic787 commented 4 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 floating 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?

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. masonry 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/