Items placed wrong after resizing when using columnOpts.breakpoints

[ocostello]

Subject of the issue

When the user resizes a page smaller, hence triggering use of columnsOpts.breakpoints the components usually seem to be positioned correctly, but when the user refreshes the page some of the components are in the wrong place.

Your environment

• version of gridstack.js - 12.3.3
• which browser/OS - Chrome + macOS

Steps to reproduce

• Open viewport of the jsfiddle test square wide, and make the gridstack component wide so all 12 widgets are displayed side-by-side.
• Make the gridstack component thinner until it hits 6 column breakpoint and changes from a 12x1 grid of widgets to a 6x2 grid. So far all good!
• Refresh the page, the width of the gridstack component should've remained the same
• The widgets are now in a weird order, 6 in row 1 and then a new widget in every row, the last column after this

We're using Gridstack.init to load items instead of addWidget, but so is the demo code so that seems like a common usecase.

https://stackblitz.com/edit/gridstack-demo-f2h1wxbm?file=styles.css

Screen.Recording.2025-11-17.at.17.16.24.mov

Expected behavior

I'd expect the page to look the same after a refresh as it did before a refresh - 6 widgets on the first row and 6 widgets on the second row

[adumesny]

this is hard to fix because breakpoint can use a reflow option ('compact' or 'list' in your case) BUT when loading into 6 column we don't know what layout column you have listed (suppose we could scan entire thing and estimate it's for 12 column) and then we would have to detect you have a breakpoint option and go through the same flow to position and 'ignore' the position you are hard coding and telling us.

Unlikely to get 'fixed'

In your case I would suggest you DO NOT specify x,y coord and let the engine position one after each other.

don't forget to donate if you find this lib useful!

[ocostello]

If you don’t mind helping me to understand:

we would have to detect you have a breakpoint option

The init function which loads the widgets into the grid is passed the options which contain my breakpoints config; at the point that you’re loading into a 6 column setup isn’t it known that I’m using the breakpoint option? And that the max amount of columns I’m loading into is 12, the default, because I haven’t passed in a different amount of column.