Premise

Every component looks out for itself -

As a rule of thumbs, the component don't mind sizing, they just want to use their content dimensions. the height to the minimum, and width to the maximum.

Width will be managed by parent containers. Height is derived by content height, except if user defined otherwise.

Examples for grid building

Foobar layout editor

https://youtu.be/BeI4u0vgcOo?t=5

Screen Shot 2022-10-09 at 15.30.16.png

Android widget editor

https://youtu.be/RfpuQAJ_GV4?t=365

Screen Shot 2022-10-09 at 15.31.18.png

Trello

https://youtu.be/xky48zyL9iA?t=130

Screen Shot 2022-10-09 at 15.32.26.png

Whimsical

https://whimsical.com/WEKiunkAqZKuYerpP3a54V

Screen Shot 2022-10-09 at 15.33.22.png

Notion

Example, Beauty demo on Notion

Screen Shot 2022-10-09 at 15.34.31.png

Libraries

PlainDraggable

This one got a lot of important features we can use

Muuri

RGL Example 0 - Showcase

gridster.js

This is what we're using for the UI Control

Packery

Draggable JS - JavaScript drag and drop library

CSS Grid Generator | LayoutIt!

This shows how nested components will behave

Home - Vue Grid Layout

For Angular

ContentBuilder.js Example - A generic builder for (almost) any framework