Items dragged within a sortable grid are not properly moving according to widths

https://share.getcloudapp.com/yAu6ymWD

In the above, you’ll notice that the calculations seem off. I’m not sure if I’m supposed to be calculating any widths and passing them to the library or if the library should be smartly moving these elements around according to their widths.

The elements are inline-block elements.

Also, I noticed that when I leverage transform: translate3d... CSS that you can noticeably see that the font styling changes… to avoid this, I instead just move them around with top/left CSS.

[clauderic]

Did you set the sorting strategy to a no-op?

function disableSortingStrategy() {
  return null;
}

<SortableContext strategy={disableSortingStrategy}>

[clauderic]

Your layout is not predictable, so you’ll need to follow the same strategy outlined here https://github.com/clauderic/dnd-kit/issues/44#issuecomment-757312037 or here https://github.com/clauderic/dnd-kit/issues/44#issuecomment-757324165