angular/cdk/drag-drop incorrect horizontal multi row layout

[jendaneu1]

Bug, feature request, or proposal:

Horizontal sortable does not work when using more rows of sortable items.

What is the expected behavior?

It should behave correctly when specified flex-wrap: wrap on the container.

What is the current behavior?

The items are not sorted in correct way and some unexpected drop zones or empty spaces are shown

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Just look at this example: https://stackblitz.com/angular/gxaxdlegndb?file=app%2Fcdk-drag-drop-horizontal-sorting-example.ts and set flex-wrap: wrap on the list class.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[crisbeto]

This isn't supported at the moment. As it's set up right now, it'll only look at one axis at a time to determine how the items are sorted.

[jendaneu1]

OK thanks, is it planned for future? It would be great...

[JaxonWright]

This would be amazing. My list of items is in a horizontal grid.

[josephperrott]

Closing as duplicate of #13372

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}