When using x- and y-offset to move an element around it says % as the unit in the popup. What is used in the actual CSS on the other hand (in the front- and in the backend) is vw.
This causes two problems:
- While resizing the window in the backend, the element that was moved using offset is changing its position, moving around in the grid, ignoring the columns. When changing the unit inside the translate() statement to percentage, it works perfectly.
- The same happens on the frontend, as soon as you have the grid inside a container with a fixed or max-width. The grid with its columns uses the grid's container as reference (due to percentage units), while the elements with x- or y-offset use the viewport (due to vw units)—which in this case are not the same.