Creating a fully flowting responsive layout

[Jorgensen]

Inspired by this layout https://cargo.site/Templates#wireframep091 where its possible to move elements freely around, I'm trying to create a fully flowting layout - but I'm quite unsure how to do it the best way - if possible at all (for me).

You can see an example here https://rattenborg.com/2022/

What I have done now - I have placed some DIVS, than can be moved around using the concept from this page https://www.w3schools.com/howto/howto_js_draggable.asp, and every time an object is moved, its x and y pos is saved in a MySQL database, where elements are loaded and placed from, when the page reloads.

It's working just fine now, but one thing I can't figure out is how to make the layout flexible, so it can be used on different resolutions. The drag function requires the elements to have a absolute position, so I'm quite tied up to that, unless there is a smarter way to achieve what I search for.

I sure need to look into how to protect the layout, so visiters can't adjust elements, but right now it's just a proof of concept.

If anyone can guide me in the right direction I would be glad 🙂

Jorgensen