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

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.

Yeah, I was asked this question twice this week. As people start to expand their imagination for what's possible in layout with CSS, they are reaching for the things they've seen... Pinterest and other sites use this layout. It is a Flexbox-like layout, but with different content order than what's possible using multicolumn.

I'm new to this process, so please point me in the right direction if I've misunderstood anything or should be proposing solutions somewhere else, or at a later point in time.

In order to fit the Masonry style layout in Flexbox, flex-direction could be extendeed with two additional values: row-cross and column-cross. (or something like that - naming isn't important to me)
column-cross would have the block direction as main axis, like column, but laying out flex items one by one along the cross axis, as if wrapping on to multiple lines.
row-cross would be similar, but have inline direction as main axis.
By adding a flex-wrap value of wrap or wrap-reverse, the flex items would be wrapped and dispersed between lines in the direction of the chosen cross axis.

This approach would still have the problem of flex-items not being "intuitively placed" i.e. a flex item might be before another in order, but be farther from the main start than that other item - somewhat breaking the (assumed) Masonry expectation that earlier items appear first when scrolling.

You can have Grid do Masonry if you know the heights of the items ahead of time. It's a bit hacky, but you set the grid container to grid: auto-flow dense 1px / <column widths here>;, then set each item to grid-row: span <pixel height as integer>; (for example, if the item is 50px tall, use grid-row: span 50;).

The dense placement will put each item into whichever column is the least filled (has the highest open row).

There's not currently any way to make this work with auto heights. We might do this in the future.

This kind of layout isn't very well suited for Grid, so I don't think we should try to squeeze it in there. It seems multicol layout is a better fit for the example in rachelandrew/cssgrid-ama#19 (comment)
We could add a column-auto-flow property, similar to: https://drafts.csswg.org/css-grid/#grid-auto-flow-property, where 'column' would do it exactly as that example, and 'column dense' would place the next box in the column with the smallest height, i.e. "4" would go under "3" in that example.

MatsPalmgren, the column layout is not good, because reordering the content, when you add more items, and basically vertically flowing across the columns, in a typographically correct way.

tabatkins, currently this grid feature is promised:
https://bug1336679.bmoattachments.org/attachment.cgi?id=8833796

This testcase is a lazy load picture gallery, when you scroll down, it loads more items as flowed.

Only 1 issue causes discussion: the maximum number of rows is too limited in firefox and crhomium.
probably would be better way to limit the row-spanning itself instead of the whole grid if it causes some stacking problems.

for a final solution the float: top left; can ce 1 possible way to make cheap and responsive masonry, but this one doesn't exist currently.

At the V&A we're currently using columns as a "solution". This is fine, until we need to add more items into the DOM. Because columns items are displayed in the order of the HTML elements, when you add more at the bottom the resulting transition is a very unexpected user experience.

Example: https://www.vam.ac.uk/collections/renaissance

Clicking the 'show more' button reveals more items, but how the items appear to be ordered is very odd.

https://500px.com/

This is a very common layout, in any case, I hope to have the relevant norms as soon as possible.

@yisibl

@yisibl it is pretty easy with flex only currently: https://jsfiddle.net/utasir/t0a1dnq1/

@hunboy

@hunboy That's not the same.In particular, the last element is stretched.

Just wanted to put in my support for the implementation of masonry style layout through css grid. Column does not work when adding more content.

@jamesdoc

Would it work to have a keyword for grid-template-columns or -rows which would effectively tell that axis to be flow/flex instead of lining things up?

So, for example, in @jamesdoc 's example above I would have something like:

.figure-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: flow;
}

Does that make sense?

I'm not sure how I'd expect this to behave if you used that keyword for both axes, though...something like this, perhaps, simply packing boxes into the next available space horizontally/vertically based on grid-auto-flow:

I'm sure I'm missing some reason why this wouldn't work, but wanted to suggest it in case it helps move the conversation along. :) Thanks!

There's no "simple" way to adapt Grid into Masonry - anything would involve non-trivial edits to the layout algorithm. Packery, in particular, really needs things to have a defined width. ^_^

Hi.
I think a good approach for masonry-style layouts is something similar to salvattore: https://github.com/rnmp/salvattore

I imagine a new property to define how the items are placed in the cells. Currently, if two elements are in the same cell, they are overlapping. This new property, let's call area-placement could have the value flow to insert the new items next to the currently existing items. For example:

.masonry {
    display: grid;
    grid-template-column: repeat(3, 300px);
    grid-column-gap: 20px;
}
.item:nth-child(3n+1) {
    grid-area: 1 / 1;
    area-placement: flow;
}
.item:nth-child(3n+2) {
    grid-area: 2 / 1;
    area-placement: flow;
}
.item:nth-child(3n) {
    grid-area: 3 / 1;
    area-placement: flow;
}

This brings more flexibility, not only to build masonry layouts, but also for more other use cases.

I don't see why you force a specific column in your example, you can achieve the exact same example like this:

.masonry {
    display: grid;
    grid-template-column: repeat(3, 300px);
    grid-column-gap: 20px;
    grid-auto-rows: auto;
}
.item:nth-child(3n+1) {
    grid-column: 1;
}
.item:nth-child(3n+2) {
    grid-column: 2;
}
.item:nth-child(3n) {
    grid-column: 3;
}

(and when you have subgrid, you will be able to wrap this niceline in one row of the parent grid if you want, yet reusing the grid lines for your columns)

Sorry, I have explained myself badly.
What I try to say is that when you place many elements in the same cell in a grid, these elements are overlapping each other. You can see an example here:

https://codepen.io/oscarotero/pen/yEgawv

A way to archieve a masonry-style grid could be allowing to customize this behavior and instead place all elements in the same position, they respect the natural flow, as they where placed in different containers like in this example:

https://codepen.io/oscarotero/pen/LrxRoK

Your example is not valid because the cells of the same row have the same height:

https://codepen.io/oscarotero/pen/JZERgq

AFAIK, subgrid cannot be applied to grid areas, but html element. If subgrid could be applied to grid areas or cells, that would be great because opens the door to an endless number of possibilities.

Hi, I am the author of Masonry JavaScript plugin. Just seeing this thread now.

I would love to see Masonry layouts be added to the CSS spec

The Masonry plugin will turn 10 years old next year. It has remained widely popular through the years. Even with the addition of flexbox & grid layout specs, the Masonry use case remains to be supported natively. It deserves to be added to the spec. I regret not advocating for its adoption earlier (hindsight 20/20).

A couple items to think about:

Loading images

The Masonry layout algorithm works by iterating through a collection of item elements, measuring each, and placing them in a column. If the size of an item changes (loading media like images and video) the entire layout may need to change — placing items in different columns. This can lead disorientation while you watch the page load.

Multi-column spanning items

Will the layout support items that can occupy more than one column?

Filling gaps

If multi-column items are supported, does the algorithm support filling gaps that may be filled by subsequent items? I had to develop a separate plugin, Packery, to hand this much requested feature.

Retaining horizontal order

Lots of users still expect horizontal order to be maintained even with the Masonry layout. See desandro/masonry#873. Counter-intuitive to a developer, I realized, but its what the people wanted.

That said, I think a Masonry layout spec that at least supports the basic single-column layout would be a great feature that satisfies 80% of use cases. I'm happy to provide my experience & discuss this more.

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?

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

@OliverJAsh Isn't that the same as what I proposed 2 years ago in this same thread? #945 (comment)

@Loirooriol

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

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/

Navigation Menu

Repository navigation

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

35 remaining items

Loading images

Multi-column spanning items

Filling gaps

Retaining horizontal order

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

📋 Server Request & Proxy Logs

⚙️ Pengaturan Proxy Target

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

Description

Activity

jensimmons commented on Jan 17, 2017

Zatnosk commented on Jan 18, 2017

tabatkins commented on Jan 23, 2017

MatsPalmgren commented on Feb 6, 2017

hunboy commented on Feb 6, 2017

hunboy commented on Feb 7, 2017

jamesdoc commented on Feb 22, 2017

yisibl commented on Mar 30, 2017

hunboy commented on Mar 30, 2017

yisibl commented on Apr 21, 2017

jcklpe commented on Jun 8, 2017

nategreen commented on Jun 26, 2017

tabatkins commented on Jun 27, 2017

35 remaining items

oscarotero commented on Jun 6, 2018

FremyCompany commented on Jun 8, 2018

oscarotero commented on Jun 9, 2018

desandro commented on Oct 24, 2018

Loading images

Multi-column spanning items

Filling gaps

Retaining horizontal order

SelenIT commented on Oct 24, 2018

MrGrigri commented on Oct 24, 2018

MrGrigri commented on Oct 24, 2018

OliverJAsh commented on Jun 15, 2019

Loirooriol commented on Jun 15, 2019

OliverJAsh commented on Jun 17, 2019

MatsPalmgren commented on Jan 6, 2020

Nic787 commented on Apr 8, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions