Closed
Description
Description
When initializing the GridStack layout in a larger breakpoint (e.g., lg), the grid properly relayouts itself when resizing to a smaller breakpoint like md. However, if the user loads the page directly in a smaller breakpoint (md), the layout appears broken, with widgets not positioned as expected.
Steps to Reproduce
- Open the grid layout in a large breakpoint (
lg). - Resize the window to a medium breakpoint (
md) – layout adjusts correctly. - Refresh the page while in the
mdbreakpoint – layout appears broken.
Expected Behavior
The grid should correctly initialize in smaller breakpoints without requiring a resize from a larger breakpoint.
Screenshots / Video
Example video showcasing the issue:
Screen.Recording.Feb.15.2025.mov
Reproduction Code
CodeSandbox for reference:
https://codesandbox.io/p/sandbox/gridstack-breakpoint-test-twzq7j
Additional Context
- This issue occurs when the page is initially loaded in a smaller breakpoint like in a ipad or smaller screensize
- GridStack correctly handles resizing but does not seem to initialize properly in smaller breakpoints.
Would love to hear your thoughts on this! Thanks for the great work on GridStack! 🚀