Layout breaks when grid is initilized with one column

[FilipKujavec]

Subject of the issue

Layout breaks when grid is initialized in one column through breakpoints with makeWidget(). Both the order is wrong and when resizing, it doesnt properly restore the 12 column layout.

Your environment

• version of gridstack.js - 12.2.1
• which browser/OS: Firefox/Windows

Steps to reproduce

https://jsfiddle.net/f3159znr/3/
Size output window down so its smaller than the breakpoint, then reload and resize it so its larger than the breakpoint

one-column.mp4

Expected behavior

Grid should behave like a grid initialized with 12 columns:

normal.mp4

I created a PR with a possible fix here: #3072

[adumesny]

your example has many issues, one of which is wrong widget DOM structure, so your widget touch and sometime render wrong... but with correct struture GridSTack:init() will initialise them all correctly, but you are missing DOM size info (you can call load() with all the sizes which calls update() on each.

you are mixing DOM load and json intialize... don't klnow where to start. That say you might have uncovered a valid bug that need fixing. will have to debug it later

[FilipKujavec]

https://jsfiddle.net/kp347naj/
Would this be a better example? This issue doesnt occur when using load() as it caches the layout in columnChanged(). But when using addWidget() or makeWidget() as they rely on cacheOneLayout() in nodeBoundFix()