I’ve been thinking for a while about my solution, but probably I’m a lack of experience in it.
I want to make something like auto-placement arrangement on grid layout which will be depended from content size and pre-defined imporatance (like prio number of sth?).
Here is Codepen with that layout: Codepen

That grid will be scrollable horizontally on desktops and vertically on mobiles (client requirement – already implemented).

I want to make that layout auto-generic as possible.
E.g.:
When one of elements will be defined as the most important with 4:3 size ratio (e.g. video or large image) I want to make it on first place in grid. Items with text/lower importance should be generated to fill free space in grid etc.

Maybe solution already exists and I don’t know about it? I’ve tried with GridStack and @egjs packing grid, but GridStack is drag-and-drop and @egjs packing grid is kind of… weird and was hard to adjust for my usage.

Pouch of coins whoever helps me! Thank you