Transitions and the placeholder

Glide, but not while held

A transition on transform, width and height makes items glide to their new places when the layout changes. Turn it off on the item a pointer holds: the engine draws it at the pointer every frame, and a transition would make it lag.

[data-grid-layout-part="item"]:not([data-dragging], [data-resizing]) {
    transition: transform 160ms ease-out, width 160ms, height 160ms;
}

Items mount already in place, so nothing animates in on load.

Lift the held item

The engine writes the held item's transform. Use the separate scale and rotate properties for a lift: they compose with it.

[data-grid-layout-part="item"][data-dragging] {
    scale: 1.02;
    rotate: 1deg;
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.18);
}

The placeholder

GridLayout.Placeholder renders only during a gesture, at the box the held item would land in. It never takes the pointer. data-kind says what the gesture is: move, resize or keyboard.