I am working on a project where I need to display a list of draggable cards. I’m using material CDK Drag and Drop for this functionality. Each card represents a person and includes a variable number of hobbies, resulting in cards of different heights.

Current Issue

The drag and drop functionality works perfectly when the cards are displayed in a single column. However, when I arrange the cards in a multi-column layout, the drag and drop experience becomes very buggy. Issues include:

• Jittering when dragging cards
• Unpredictable drop placement

Here’s a GIF demonstrating the problem:

Drag and Drop Jittering

What I’ve Tried

I have attempted several CSS layouts to resolve this, including:

• display: inline-block;
• display: flex; flex-wrap: wrap;
• Setting a fixed column-count based on display size

However, all these approaches lead to similar issues with the drag and drop functionality.

Requirements

• The cards should be arranged in a full-width, multi-column layout.
• The row height should not be dictated by the tallest card in the row like a flex-grid would do. In fact, there should be no rows at all.

Any advice or solutions to achieve smooth drag and drop in a multi-column layout with variable card heights would be greatly appreciated.

Here is a minimal example on stackblitz