From 72949ee4616e1a00cbb9aca5f1c52a3f97292cc1 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Tue, 12 Aug 2025 13:45:27 -0700
Subject: [PATCH] tweaks on save() takking column option

* more fix #2493
* engine save tweaks to hsow it gets column count (uses actual subgrid column and don't use _layouts if same as current)
* also reverted back to not save w/h:1 as people already workaround this if they need to and much less data by default.
---
 doc/API.md              | 152 ++++++++++++++++++++--------------------
 src/gridstack-engine.ts |  26 ++++---
 src/gridstack.ts        |  12 ++--
 src/utils.ts            |   5 +-
 4 files changed, 102 insertions(+), 93 deletions(-)

diff --git a/doc/API.md b/doc/API.md
index 3adcaf37..d5dd4cbb 100644
--- a/doc/API.md
+++ b/doc/API.md
@@ -113,7 +113,7 @@ Construct a grid item from the given element and options
 protected _updateResizeEvent(forceRemove): GridStack;
 ```
 
-Defined in: [gridstack.ts:2089](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2089)
+Defined in: [gridstack.ts:2090](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2090)
 
 add or remove the grid element size event handler
 
@@ -133,7 +133,7 @@ add or remove the grid element size event handler
 protected _widthOrContainer(forBreakpoint): number;
 ```
 
-Defined in: [gridstack.ts:952](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L952)
+Defined in: [gridstack.ts:953](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L953)
 
 return our expected width (or parent) , and optionally of window for dynamic column check
 
@@ -207,7 +207,7 @@ grid.addWidget({w: 3, content: 'hello'});
 batchUpdate(flag): GridStack;
 ```
 
-Defined in: [gridstack.ts:831](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L831)
+Defined in: [gridstack.ts:832](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L832)
 
 use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
 and get a single event callback. You will see no changes until `batchUpdate(false)` is called.
@@ -228,7 +228,7 @@ and get a single event callback. You will see no changes until `batchUpdate(fals
 cellHeight(val?): GridStack;
 ```
 
-Defined in: [gridstack.ts:902](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L902)
+Defined in: [gridstack.ts:903](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L903)
 
 Update current cell height - see `GridStackOptions.cellHeight` for format by updating eh Browser CSS variable.
 
@@ -260,7 +260,7 @@ grid.cellHeight('auto');  // auto-size based on content
 cellWidth(): number;
 ```
 
-Defined in: [gridstack.ts:948](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L948)
+Defined in: [gridstack.ts:949](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L949)
 
 Gets the current cell width in pixels. This is calculated based on the grid container width divided by the number of columns.
 
@@ -286,7 +286,7 @@ const widgetWidth = width * 3; // For a 3-column wide widget
 protected checkDynamicColumn(): boolean;
 ```
 
-Defined in: [gridstack.ts:958](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L958)
+Defined in: [gridstack.ts:959](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L959)
 
 checks for dynamic column count for our current size, returning true if changed
 
@@ -300,7 +300,7 @@ checks for dynamic column count for our current size, returning true if changed
 column(column, layout): GridStack;
 ```
 
-Defined in: [gridstack.ts:1037](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1037)
+Defined in: [gridstack.ts:1038](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1038)
 
 Set the number of columns in the grid. Will update existing widgets to conform to new number of columns,
 as well as cache the original layout so you can revert back to previous positions without loss.
@@ -341,7 +341,7 @@ grid.column(1);
 commit(): GridStack;
 ```
 
-Defined in: [gridstack.ts:3018](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L3018)
+Defined in: [gridstack.ts:3019](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L3019)
 
 ###### Returns
 
@@ -353,7 +353,7 @@ Defined in: [gridstack.ts:3018](https://github.com/adumesny/gridstack.js/blob/ma
 compact(layout, doSort): GridStack;
 ```
 
-Defined in: [gridstack.ts:1003](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1003)
+Defined in: [gridstack.ts:1004](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1004)
 
 Re-layout grid items to reclaim any empty space. This is useful after removing widgets
 or when you want to optimize the layout.
@@ -419,7 +419,7 @@ const element = grid.createWidgetDivs({ w: 2, h: 1, content: 'Hello World' });
 destroy(removeDOM): GridStack;
 ```
 
-Defined in: [gridstack.ts:1111](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1111)
+Defined in: [gridstack.ts:1112](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1112)
 
 Destroys a grid instance. DO NOT CALL any methods or access any vars after this as it will free up members.
 
@@ -439,7 +439,7 @@ Destroys a grid instance. DO NOT CALL any methods or access any vars after this
 disable(recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2290](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2290)
+Defined in: [gridstack.ts:2291](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2291)
 
 Temporarily disables widgets moving/resizing.
 If you want a more permanent way (which freezes up resources) use `setStatic(true)` instead.
@@ -480,7 +480,7 @@ grid.disable(false);
 enable(recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2317](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2317)
+Defined in: [gridstack.ts:2318](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2318)
 
 Re-enables widgets moving/resizing - see disable().
 Note: This is a no-op for static grids.
@@ -519,7 +519,7 @@ grid.enable(false);
 enableMove(doEnable, recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2343](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2343)
+Defined in: [gridstack.ts:2344](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2344)
 
 Enables/disables widget moving for all widgets. No-op for static grids.
 Note: locally defined items (with noMove property) still override this setting.
@@ -556,7 +556,7 @@ grid.enableMove(true, false);
 enableResize(doEnable, recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:2371](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2371)
+Defined in: [gridstack.ts:2372](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2372)
 
 Enables/disables widget resizing for all widgets. No-op for static grids.
 Note: locally defined items (with noResize property) still override this setting.
@@ -593,7 +593,7 @@ grid.enableResize(true, false);
 float(val): GridStack;
 ```
 
-Defined in: [gridstack.ts:1145](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1145)
+Defined in: [gridstack.ts:1146](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1146)
 
 Enable/disable floating widgets (default: `false`). When enabled, widgets can float up to fill empty spaces.
 See [example](http://gridstackjs.com/demo/float.html)
@@ -623,7 +623,7 @@ grid.float(false); // Disable floating (default)
 getCellFromPixel(position, useDocRelative): CellPosition;
 ```
 
-Defined in: [gridstack.ts:1175](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1175)
+Defined in: [gridstack.ts:1176](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1176)
 
 Get the position of the cell under a pixel on screen.
 
@@ -644,7 +644,7 @@ Get the position of the cell under a pixel on screen.
 getCellHeight(forcePixel): number;
 ```
 
-Defined in: [gridstack.ts:855](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L855)
+Defined in: [gridstack.ts:856](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L856)
 
 Gets the current cell height in pixels. This takes into account the unit type and converts to pixels if necessary.
 
@@ -676,7 +676,7 @@ const pixelHeight = grid.getCellHeight(true);
 getColumn(): number;
 ```
 
-Defined in: [gridstack.ts:1074](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1074)
+Defined in: [gridstack.ts:1075](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1075)
 
 Get the number of columns in the grid (default 12).
 
@@ -698,7 +698,7 @@ const columnCount = grid.getColumn(); // returns 12 by default
 static getDD(): DDGridStack;
 ```
 
-Defined in: [gridstack.ts:2187](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2187)
+Defined in: [gridstack.ts:2188](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2188)
 
 Get the global drag & drop implementation instance.
 This provides access to the underlying drag & drop functionality.
@@ -722,7 +722,7 @@ const dd = GridStack.getDD();
 getFloat(): boolean;
 ```
 
-Defined in: [gridstack.ts:1162](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1162)
+Defined in: [gridstack.ts:1163](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1163)
 
 Get the current float mode setting.
 
@@ -745,7 +745,7 @@ console.log('Floating enabled:', isFloating);
 getGridItems(): GridItemHTMLElement[];
 ```
 
-Defined in: [gridstack.ts:1088](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1088)
+Defined in: [gridstack.ts:1089](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1089)
 
 Returns an array of grid HTML elements (no placeholder) - used to iterate through our children in DOM order.
 This method excludes placeholder elements and returns only actual grid items.
@@ -771,7 +771,7 @@ items.forEach(item => {
 getMargin(): number;
 ```
 
-Defined in: [gridstack.ts:1786](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1786)
+Defined in: [gridstack.ts:1787](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1787)
 
 Returns the current margin value as a number (undefined if the 4 sides don't match).
 This only returns a number if all sides have the same margin value.
@@ -799,7 +799,7 @@ if (margin !== undefined) {
 getRow(): number;
 ```
 
-Defined in: [gridstack.ts:1205](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1205)
+Defined in: [gridstack.ts:1206](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1206)
 
 Returns the current number of rows, which will be at least `minRow` if set.
 The row count is based on the highest positioned widget in the grid.
@@ -887,7 +887,7 @@ isAreaEmpty(
    h): boolean;
 ```
 
-Defined in: [gridstack.ts:1224](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1224)
+Defined in: [gridstack.ts:1225](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1225)
 
 Checks if the specified rectangular area is empty (no widgets occupy any part of it).
 
@@ -921,7 +921,7 @@ if (grid.isAreaEmpty(1, 1, 2, 2)) {
 isIgnoreChangeCB(): boolean;
 ```
 
-Defined in: [gridstack.ts:1105](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1105)
+Defined in: [gridstack.ts:1106](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1106)
 
 Returns true if change callbacks should be ignored due to column change, sizeToContent, loading, etc.
 This is useful for callers who want to implement dirty flag functionality.
@@ -947,7 +947,7 @@ if (!grid.isIgnoreChangeCB()) {
 load(items, addRemove): GridStack;
 ```
 
-Defined in: [gridstack.ts:720](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L720)
+Defined in: [gridstack.ts:721](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L721)
 
 Load widgets from a list. This will call update() on each (matching by id) or add/remove widgets that are not there.
 Used to restore a grid layout for a saved layout list (see `save()`).
@@ -1032,7 +1032,7 @@ newly created grid
 makeWidget(els, options?): GridItemHTMLElement;
 ```
 
-Defined in: [gridstack.ts:1252](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1252)
+Defined in: [gridstack.ts:1253](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1253)
 
 If you add elements to your grid by hand (or have some framework creating DOM), you have to tell gridstack afterwards to make them widgets.
 If you want gridstack to add the elements for you, use `addWidget()` instead.
@@ -1075,7 +1075,7 @@ grid.makeWidget(element, {x: 0, y: 1, w: 4, h: 2});
 margin(value): GridStack;
 ```
 
-Defined in: [gridstack.ts:1757](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1757)
+Defined in: [gridstack.ts:1758](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1758)
 
 Updates the margins which will set all 4 sides at once - see `GridStackOptions.margin` for format options.
 Supports CSS string format of 1, 2, or 4 values or a single number.
@@ -1106,7 +1106,7 @@ grid.margin('5px 10px 15px 20px'); // Different for each side
 movable(els, val): GridStack;
 ```
 
-Defined in: [gridstack.ts:2231](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2231)
+Defined in: [gridstack.ts:2232](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2232)
 
 Enables/Disables dragging by the user for specific grid elements. 
 For all items and future items, use enableMove() instead. No-op for static grids.
@@ -1143,7 +1143,7 @@ grid.movable('#fixed-widget', false);
 off(name): GridStack;
 ```
 
-Defined in: [gridstack.ts:1348](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1348)
+Defined in: [gridstack.ts:1349](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1349)
 
 unsubscribe from the 'on' event GridStackEvent
 
@@ -1163,7 +1163,7 @@ unsubscribe from the 'on' event GridStackEvent
 offAll(): GridStack;
 ```
 
-Defined in: [gridstack.ts:1375](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1375)
+Defined in: [gridstack.ts:1376](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1376)
 
 Remove all event handlers from the grid. This is useful for cleanup when destroying a grid.
 
@@ -1187,7 +1187,7 @@ grid.offAll(); // Remove all event listeners
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1311](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1311)
+Defined in: [gridstack.ts:1312](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1312)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1238,7 +1238,7 @@ grid.on('added', (event, items) => {
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1312](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1312)
+Defined in: [gridstack.ts:1313](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1313)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1289,7 +1289,7 @@ grid.on('added', (event, items) => {
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1313](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1313)
+Defined in: [gridstack.ts:1314](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1314)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1340,7 +1340,7 @@ grid.on('added', (event, items) => {
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1314](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1314)
+Defined in: [gridstack.ts:1315](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1315)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1391,7 +1391,7 @@ grid.on('added', (event, items) => {
 on(name, callback): GridStack;
 ```
 
-Defined in: [gridstack.ts:1315](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1315)
+Defined in: [gridstack.ts:1316](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1316)
 
 Register event handler for grid events. You can call this on a single event name, or space separated list.
 
@@ -1442,7 +1442,7 @@ grid.on('added', (event, items) => {
 onResize(clientWidth): GridStack;
 ```
 
-Defined in: [gridstack.ts:2028](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2028)
+Defined in: [gridstack.ts:2029](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2029)
 
 called when we are being resized - check if the one Column Mode needs to be turned on/off
 and remember the prev columns we used, or get our count from parent, as well as check for cellHeight==='auto' (square)
@@ -1464,7 +1464,7 @@ or `sizeToContent` gridItem options.
 prepareDragDrop(el, force?): GridStack;
 ```
 
-Defined in: [gridstack.ts:2714](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2714)
+Defined in: [gridstack.ts:2715](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2715)
 
 prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
 
@@ -1507,7 +1507,7 @@ replace just one instance.
 removeAll(removeDOM, triggerEvent): GridStack;
 ```
 
-Defined in: [gridstack.ts:1424](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1424)
+Defined in: [gridstack.ts:1425](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1425)
 
 Removes all widgets from the grid.
 
@@ -1552,7 +1552,7 @@ removeWidget(
    triggerEvent): GridStack;
 ```
 
-Defined in: [gridstack.ts:1386](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1386)
+Defined in: [gridstack.ts:1387](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1387)
 
 Removes widget from the grid.
 
@@ -1574,7 +1574,7 @@ Removes widget from the grid.
 resizable(els, val): GridStack;
 ```
 
-Defined in: [gridstack.ts:2257](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2257)
+Defined in: [gridstack.ts:2258](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2258)
 
 Enables/Disables user resizing for specific grid elements.
 For all items and future items, use enableResize() instead. No-op for static grids.
@@ -1608,7 +1608,7 @@ grid.resizable('#fixed-size-widget', false);
 resizeToContent(el): void;
 ```
 
-Defined in: [gridstack.ts:1647](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1647)
+Defined in: [gridstack.ts:1648](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1648)
 
 Updates widget height to match the content height to avoid vertical scrollbars or dead space.
 This automatically adjusts the widget height based on its content size.
@@ -1644,7 +1644,7 @@ grid.resizeToContent(widget);
 rotate(els, relative?): GridStack;
 ```
 
-Defined in: [gridstack.ts:1722](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1722)
+Defined in: [gridstack.ts:1723](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1723)
 
 Rotate widgets by swapping their width and height. This is typically called when the user presses 'r' during dragging.
 The rotation swaps the w/h dimensions and adjusts min/max constraints accordingly.
@@ -1679,7 +1679,7 @@ save(
    saveContent, 
    saveGridOpt, 
    saveCB, 
-   columnSize?): 
+   column?): 
   | GridStackOptions
   | GridStackWidget[];
 ```
@@ -1695,7 +1695,7 @@ saves the current layout returning a list of widgets for serialization which mig
 | `saveContent` | `boolean` | `true` | if true (default) the latest html inside .grid-stack-content will be saved to GridStackWidget.content field, else it will be removed. |
 | `saveGridOpt` | `boolean` | `false` | if true (default false), save the grid options itself, so you can call the new GridStack.addGrid() to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead. |
 | `saveCB` | [`SaveFcn`](#savefcn) | `GridStack.saveCB` | callback for each node -> widget, so application can insert additional data to be saved into the widget data structure. |
-| `columnSize?` | `number` | `undefined` | if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout). Otherwise it will use the largest possible layout (say 12 even if rendering at 1 column) so we can restore to all layouts. Note: nested grids will ALWAYS save the container size to match overall layouts (parent + child) to be consistent. |
+| `column?` | `number` | `undefined` | if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout). Otherwise it will use the largest possible layout (say 12 even if rendering at 1 column) so we can restore to all layouts. Note: nested grids will ALWAYS save the container size to match overall layouts (parent + child) to be consistent. |
 
 ###### Returns
 
@@ -1710,7 +1710,7 @@ list of widgets or full grid option, including .children list of widgets
 setAnimation(doAnimate, delay?): GridStack;
 ```
 
-Defined in: [gridstack.ts:1443](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1443)
+Defined in: [gridstack.ts:1444](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1444)
 
 Toggle the grid animation state.  Toggles the `grid-stack-animate` class.
 
@@ -1734,7 +1734,7 @@ setStatic(
    recurse): GridStack;
 ```
 
-Defined in: [gridstack.ts:1466](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1466)
+Defined in: [gridstack.ts:1467](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1467)
 
 Toggle the grid static state, which permanently removes/add Drag&Drop support, unlike disable()/enable() that just turns it off/on.
 Also toggle the grid-stack-static class.
@@ -1761,7 +1761,7 @@ static setupDragIn(
    root?): void;
 ```
 
-Defined in: [gridstack.ts:2200](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2200)
+Defined in: [gridstack.ts:2201](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2201)
 
 call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
 Called during GridStack.init() as options, but can also be called directly (last param are used) in case the toolbar
@@ -1786,7 +1786,7 @@ is dynamically create and needs to be set later.
 protected triggerEvent(event, target): void;
 ```
 
-Defined in: [gridstack.ts:2968](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2968)
+Defined in: [gridstack.ts:2969](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L2969)
 
 call given event callback on our main top-most grid (if we're nested)
 
@@ -1807,7 +1807,7 @@ call given event callback on our main top-most grid (if we're nested)
 update(els, opt): GridStack;
 ```
 
-Defined in: [gridstack.ts:1543](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1543)
+Defined in: [gridstack.ts:1544](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1544)
 
 Updates widget position/size and other info. This is used to change widget properties after creation.
 Can update position, size, content, and other widget properties.
@@ -1852,7 +1852,7 @@ grid.update('#my-widget', {
 updateOptions(o): GridStack;
 ```
 
-Defined in: [gridstack.ts:1484](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1484)
+Defined in: [gridstack.ts:1485](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1485)
 
 Updates the passed in options on the grid (similar to update(widget) for for the grid options).
 
@@ -1872,7 +1872,7 @@ Updates the passed in options on the grid (similar to update(widget) for for the
 willItFit(node): boolean;
 ```
 
-Defined in: [gridstack.ts:1800](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1800)
+Defined in: [gridstack.ts:1801](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack.ts#L1801)
 
 Returns true if the height of the grid will be less than the vertical
 constraint. Always returns true if grid doesn't have height constraint.
@@ -2130,7 +2130,7 @@ cacheLayout(
    clear): GridStackEngine;
 ```
 
-Defined in: [gridstack-engine.ts:1188](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1188)
+Defined in: [gridstack-engine.ts:1196](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1196)
 
 call to cache the given layout internally to the given location so we can restore back when column changes size
 
@@ -2152,7 +2152,7 @@ call to cache the given layout internally to the given location so we can restor
 cacheOneLayout(n, column): GridStackEngine;
 ```
 
-Defined in: [gridstack-engine.ts:1208](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1208)
+Defined in: [gridstack-engine.ts:1216](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1216)
 
 call to cache the given node layout internally to the given location so we can restore back when column changes size
 
@@ -2194,7 +2194,7 @@ true if x,y or w,h are different after clamping to min/max
 cleanupNode(node): GridStackEngine;
 ```
 
-Defined in: [gridstack-engine.ts:1239](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1239)
+Defined in: [gridstack-engine.ts:1247](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1247)
 
 called to remove all internal values but the _id
 
@@ -2357,7 +2357,7 @@ Defined in: [gridstack-engine.ts:1002](https://github.com/adumesny/gridstack.js/
 protected findCacheLayout(n, column): number;
 ```
 
-Defined in: [gridstack-engine.ts:1222](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1222)
+Defined in: [gridstack-engine.ts:1230](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1230)
 
 ###### Parameters
 
@@ -2680,7 +2680,7 @@ engine.removeNode(node, true, true);
 removeNodeFromLayoutCache(n): void;
 ```
 
-Defined in: [gridstack-engine.ts:1226](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1226)
+Defined in: [gridstack-engine.ts:1234](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1234)
 
 ###### Parameters
 
@@ -2698,21 +2698,21 @@ Defined in: [gridstack-engine.ts:1226](https://github.com/adumesny/gridstack.js/
 save(
    saveElement, 
    saveCB?, 
-   columnSize?): GridStackNode[];
+   column?): GridStackNode[];
 ```
 
-Defined in: [gridstack-engine.ts:1017](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1017)
+Defined in: [gridstack-engine.ts:1018](https://github.com/adumesny/gridstack.js/blob/master/src/gridstack-engine.ts#L1018)
 
-saves a copy of the largest column layout (eg 12 even when rendering oneColumnMode) so we don't loose orig layout,
-returning a list of widgets for serialization
+saves a copy of the largest column layout (eg 12 even when rendering 1 column) so we don't loose orig layout, unless explicity column
+count to use is given. returning a list of widgets for serialization
 
 ###### Parameters
 
 | Parameter | Type | Default value | Description |
 | ------ | ------ | ------ | ------ |
-| `saveElement` | `boolean` | `true` | - |
-| `saveCB?` | [`SaveFcn`](#savefcn) | `undefined` | - |
-| `columnSize?` | `number` | `undefined` | if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout). Otherwise it will use the largest possible layout (say 12 even if rendering at 1 column) so we can restore to all layouts. Note: nested grids will ALWAYS save the container size to match overall layouts (parent + child) to be consistent. |
+| `saveElement` | `boolean` | `true` | if true (default), the element will be saved to GridStackWidget.el field, else it will be removed. |
+| `saveCB?` | [`SaveFcn`](#savefcn) | `undefined` | callback for each node -> widget, so application can insert additional data to be saved into the widget data structure. |
+| `column?` | `number` | `undefined` | if provided, the grid will be saved for the given column count (IFF we have matching internal saved layout, or current layout). Note: nested grids will ALWAYS save the container w to match overall layouts (parent + child) to be consistent. |
 
 ###### Returns
 
@@ -2845,7 +2845,7 @@ new Utils(): Utils;
 static addElStyles(el, styles): void;
 ```
 
-Defined in: [utils.ts:691](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L691)
+Defined in: [utils.ts:690](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L690)
 
 ###### Parameters
 
@@ -2864,7 +2864,7 @@ Defined in: [utils.ts:691](https://github.com/adumesny/gridstack.js/blob/master/
 static appendTo(el, parent): void;
 ```
 
-Defined in: [utils.ts:673](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L673)
+Defined in: [utils.ts:672](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L672)
 
 ###### Parameters
 
@@ -2943,7 +2943,7 @@ const overlap = Utils.areaIntercept(
 static canBeRotated(n): boolean;
 ```
 
-Defined in: [utils.ts:794](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L794)
+Defined in: [utils.ts:793](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L793)
 
 true if the item can be rotated (checking for prop, not space available)
 
@@ -2963,7 +2963,7 @@ true if the item can be rotated (checking for prop, not space available)
 static clone<T>(obj): T;
 ```
 
-Defined in: [utils.ts:636](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L636)
+Defined in: [utils.ts:635](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L635)
 
 single level clone, returning a new object with same top fields. This will share sub objects and arrays
 
@@ -2989,7 +2989,7 @@ single level clone, returning a new object with same top fields. This will share
 static cloneDeep<T>(obj): T;
 ```
 
-Defined in: [utils.ts:652](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L652)
+Defined in: [utils.ts:651](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L651)
 
 Recursive clone version that returns a full copy, checking for nested objects and arrays ONLY.
 Note: this will use as-is any key starting with double __ (and not copy inside) some lib have circular dependencies.
@@ -3016,7 +3016,7 @@ Note: this will use as-is any key starting with double __ (and not copy inside)
 static cloneNode(el): HTMLElement;
 ```
 
-Defined in: [utils.ts:667](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L667)
+Defined in: [utils.ts:666](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L666)
 
 deep clone the given HTML node, removing teh unique id field
 
@@ -3226,7 +3226,7 @@ const fromShadow = Utils.getElements('.item', shadowRoot);
 static getValuesFromTransformedElement(parent): DragTransform;
 ```
 
-Defined in: [utils.ts:751](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L751)
+Defined in: [utils.ts:750](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L750)
 
 defines an element that is used to get the offset and scale from grid transforms
 returns the scale and offsets from said element
@@ -3247,7 +3247,7 @@ returns the scale and offsets from said element
 static initEvent<T>(e, info): T;
 ```
 
-Defined in: [utils.ts:708](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L708)
+Defined in: [utils.ts:707](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L707)
 
 ###### Type Parameters
 
@@ -3441,7 +3441,7 @@ removes internal fields '_' and default values for saving
 static removePositioningStyles(el): void;
 ```
 
-Defined in: [utils.ts:543](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L543)
+Defined in: [utils.ts:542](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L542)
 
 ###### Parameters
 
@@ -3565,7 +3565,7 @@ static simulateMouseEvent(
    target?): void;
 ```
 
-Defined in: [utils.ts:724](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L724)
+Defined in: [utils.ts:723](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L723)
 
 copies the MouseEvent (or convert Touch) properties and sends it as another event to the given target
 
@@ -3620,7 +3620,7 @@ static swap(
    b): void;
 ```
 
-Defined in: [utils.ts:775](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L775)
+Defined in: [utils.ts:774](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L774)
 
 swap the given object 2 field values
 
@@ -3642,7 +3642,7 @@ swap the given object 2 field values
 static throttle(func, delay): () => void;
 ```
 
-Defined in: [utils.ts:533](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L533)
+Defined in: [utils.ts:532](https://github.com/adumesny/gridstack.js/blob/master/src/utils.ts#L532)
 
 delay calling the given function for given delay, preventing new calls from happening while waiting
 
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
index a781fc11..937a2425 100644
--- a/src/gridstack-engine.ts
+++ b/src/gridstack-engine.ts
@@ -1008,17 +1008,25 @@ export class GridStackEngine {
     return this;
   }
 
-  /** saves a copy of the largest column layout (eg 12 even when rendering oneColumnMode) so we don't loose orig layout,
-   * returning a list of widgets for serialization
-   * @param columnSize if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout).
-   * Otherwise it will use the largest possible layout (say 12 even if rendering at 1 column) so we can restore to all layouts.
-   * Note: nested grids will ALWAYS save the container size to match overall layouts (parent + child) to be consistent.
+  /** saves a copy of the largest column layout (eg 12 even when rendering 1 column) so we don't loose orig layout, unless explicity column
+   * count to use is given. returning a list of widgets for serialization
+   * @param saveElement if true (default), the element will be saved to GridStackWidget.el field, else it will be removed.
+   * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
+   * @param column if provided, the grid will be saved for the given column count (IFF we have matching internal saved layout, or current layout).
+   * Note: nested grids will ALWAYS save the container w to match overall layouts (parent + child) to be consistent.
   */
-  public save(saveElement = true, saveCB?: SaveFcn, columnSize?: number): GridStackNode[] {
+  public save(saveElement = true, saveCB?: SaveFcn, column?: number): GridStackNode[] {
     // use the highest layout for any saved info so we can have full detail on reload #1849
-    // unless we're given a column size to match (always set for nested grids)
-    const len = this._layouts?.length;
-    const layout = (columnSize && this._layouts?.find((val, num) => num === columnSize)) || (len && this.column !== (len - 1) ? this._layouts[len - 1] : null) || null;
+    // unless we're given a column to match (always set for nested grids)
+    const len = this._layouts?.length || 0;
+    let layout: GridStackNode[];
+    if (len) {
+      if (column) {
+        if (column !== this.column) layout = this._layouts[column];
+      } else if (this.column !== len - 1) {
+        layout = this._layouts[len - 1];
+      }
+    }
     const list: GridStackNode[] = [];
     this.sortNodes();
     this.nodes.forEach(n => {
diff --git a/src/gridstack.ts b/src/gridstack.ts
index ae6963d0..b182cf69 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -625,14 +625,15 @@ export class GridStack {
    * @param saveGridOpt if true (default false), save the grid options itself, so you can call the new GridStack.addGrid()
    * to recreate everything from scratch. GridStackOptions.children would then contain the widget list instead.
    * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
-   * @param columnSize if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout).
+   * @param column if provided, the grid will be saved for the given column size (IFF we have matching internal saved layout, or current layout).
    * Otherwise it will use the largest possible layout (say 12 even if rendering at 1 column) so we can restore to all layouts.
-   * Note: nested grids will ALWAYS save the container size to match overall layouts (parent + child) to be consistent.
+   * NOTE: if you want to save to currently display layout, pass this.getColumn() as column.
+   * NOTE2: nested grids will ALWAYS save to the container size to be in sync with parent.
    * @returns list of widgets or full grid option, including .children list of widgets
    */
-  public save(saveContent = true, saveGridOpt = false, saveCB = GridStack.saveCB, columnSize?: number): GridStackWidget[] | GridStackOptions {
+  public save(saveContent = true, saveGridOpt = false, saveCB = GridStack.saveCB, column?: number): GridStackWidget[] | GridStackOptions {
     // return copied GridStackWidget (with optionally .el) we can modify at will...
-    const list = this.engine.save(saveContent, saveCB, columnSize);
+    const list = this.engine.save(saveContent, saveCB, column);
 
     // check for HTML content and nested grids
     list.forEach(n => {
@@ -644,7 +645,8 @@ export class GridStack {
         if (!saveContent && !saveCB) { delete n.content; }
         // check for nested grid - make sure it saves to the given container size to be consistent
         if (n.subGrid?.el) {
-          const listOrOpt = n.subGrid.save(saveContent, saveGridOpt, saveCB, n.w);
+          const column = n.w || n.subGrid.getColumn();
+          const listOrOpt = n.subGrid.save(saveContent, saveGridOpt, saveCB, column);
           n.subGridOpts = (saveGridOpt ? listOrOpt : { children: listOrOpt }) as GridStackOptions;
           delete n.subGrid;
         }
diff --git a/src/utils.ts b/src/utils.ts
index 177d7714..7b7c93b9 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -515,9 +515,8 @@ export class Utils {
     if (!n.noResize) delete n.noResize;
     if (!n.noMove) delete n.noMove;
     if (!n.locked) delete n.locked;
-    // do not optimize for default values as applications might have different defaults for this widget
-    // if (n.w === 1 || n.w === n.minW) delete n.w;
-    // if (n.h === 1 || n.h === n.minH) delete n.h;
+    if (n.w === 1 || n.w === n.minW) delete n.w;
+    if (n.h === 1 || n.h === n.minH) delete n.h;
   }
 
   /** return the closest parent (or itself) matching the given class */