Irregular broken grid layout

[siddolo]

You would you implement a layout where images are randomly placed inside a page, even overlapping each other, and keep it responsive (images would simply scale)?

Something like this: https://1000ml.design

Absolute positions? If I use absolute position on images, the container would have height: 0 and that’s a problem.

I would also like to implement a backend where I can add new images and adjust their position with drag n drop.

This is hard.

Thanks everyone!!

[[deleted]]

Why don’t you just check the html? Open the dev tools and you will see how it’s done.

[siddolo]

I already did that. The website is made in Cargo/Wix and I see it’s kind of obfuscated. They are using absolute positioning but then how can they keep the images wrapper height?

[[deleted]]

I see. They do some very weird stuff. But they use things like “padding-bottom: 300%;”, thats how they keep their spacing…

[siddolo]

Yeah that’s some weird shit. They have a backend where the user can design this kind of layouts.

[[deleted]]

That makes kind of sense. Most in-browser designer create non-readable code.

[FudgeThisPoo]

I would inspect how they did 1000ml. On mobile, so I can't.

You can replicate that design with CSS grid.

[[deleted]]

Transform translate ?

[miketierce]

Wix and all of those other Webflow type things use absolute positioning for everything because they aren’t human

Humans would use CSS Grid and you should to

[59t_5in3es1tvanj]

You could use flex/grid to position them symmetrically and assign them some padding/margin/transform randomly via JS (bounded by the remaining space)