diff --git a/Gruntfile.js b/Gruntfile.js
index e9ab71a3..e5efd75e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -21,7 +21,6 @@ module.exports = function(grunt) {
       dist: {
         files: {
           'dist/gridstack.css': 'src/gridstack.scss',
-          'dist/gridstack-extra.css': 'src/gridstack-extra.scss'
         }
       }
     },
@@ -33,7 +32,6 @@ module.exports = function(grunt) {
         },
         files: {
           'dist/gridstack.min.css': ['dist/gridstack.css'],
-          'dist/gridstack-extra.min.css': ['dist/gridstack-extra.css']
         }
       }
     },
@@ -42,7 +40,6 @@ module.exports = function(grunt) {
         files: {
           'dist/es5/gridstack-poly.js': ['src/gridstack-poly.js'],
           'dist/src/gridstack.scss': ['src/gridstack.scss'],
-          'dist/src/gridstack-extra.scss': ['src/gridstack-extra.scss'],
           'dist/angular/README.md': ['angular/README.md'],
           'dist/angular/src/gridstack.component.ts': ['angular/projects/lib/src/lib/gridstack.component.ts'],
           'dist/angular/src/gridstack-item.component.ts': ['angular/projects/lib/src/lib/gridstack-item.component.ts'],
diff --git a/README.md b/README.md
index 315a825c..326bec10 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids
   - [Extend Library](#extend-library)
   - [Extend Engine](#extend-engine)
   - [Change grid columns](#change-grid-columns)
-  - [Custom columns CSS](#custom-columns-css)
+  - [Custom columns CSS (OLD, not needed with v12+)](#custom-columns-css-old-not-needed-with-v12)
   - [Override resizable/draggable options](#override-resizabledraggable-options)
   - [Touch devices support](#touch-devices-support)
 - [Migrating](#migrating)
@@ -48,6 +48,7 @@ Join us on Slack: [https://gridstackjs.slack.com](https://join.slack.com/t/grids
   - [Migrating to v9](#migrating-to-v9)
   - [Migrating to v10](#migrating-to-v10)
   - [Migrating to v11](#migrating-to-v11)
+  - [Migrating to v12](#migrating-to-v12)
 - [jQuery Application](#jquery-application)
 - [Changes](#changes)
 - [Usage Trend](#usage-trend)
@@ -207,6 +208,8 @@ GridStack makes it very easy if you need [1-12] columns out of the box (default
 GridStack.init( {column: N} );
 ```
 
+NOTE: step 2 is OLD and not needed with v12+ which uses CSS variables instead of classes
+
 2) also include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
 ```html
 <link href="https://github.com/node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
@@ -219,7 +222,9 @@ Note: class `.grid-stack-N` will automatically be added and we include `gridstac
 
 See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
 
-## Custom columns CSS
+## Custom columns CSS (OLD, not needed with v12+)
+
+NOTE: step is OLD and not needed with v12+ which uses CSS variables instead of classes
 
 If you need > 12 columns or want to generate the CSS manually you will need to generate CSS rules for `.grid-stack-item[gs-w="X"]` and `.grid-stack-item[gs-x="X"]`.
 
@@ -491,6 +496,14 @@ GridStack.renderCB = function(el: HTMLElement, w: GridStackNode) {
 4. if no `GridStackWidget` is defined, the helper will now be inserted as is, and NOT original sidepanel item.
 5. support DOM gs- attr as well as gridstacknode JSON (see two.html) alternatives.
 
+## Migrating to v12
+
+* column and cell height code has been re-writen to use browser CSS variables, and we no longer need a tons of custom CSS classes!
+this fixes a long standing issue where people forget to include the right CSS for non 12 columns layouts, and a big speedup in many cases (many columns, or small cellHeight values).
+
+**Breaking change:**
+* `gridstack-extra.min.css` no longer exist, nor is custom column CSS needed. API/options hasn't changed.
+
 # jQuery Application
 
 This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before
diff --git a/angular/README.md b/angular/README.md
index 58737045..2af7cd84 100644
--- a/angular/README.md
+++ b/angular/README.md
@@ -18,7 +18,6 @@ MyComponent CSS
 
 ```css
 @import "https://github.com/gridstack/dist/gridstack.min.css";
-@import "https://github.com/gridstack/dist/gridstack-extra.min.css"; // if you use 2-11 column
 
 .grid-stack {
   background: #fafad2;
diff --git a/angular/angular.json b/angular/angular.json
index c7961035..ad2ef721 100644
--- a/angular/angular.json
+++ b/angular/angular.json
@@ -55,7 +55,6 @@
             ],
             "styles": [
               "node_modules/gridstack/dist/gridstack.min.css",
-              "node_modules/gridstack/dist/gridstack-extra.min.css",
               "projects/demo/src/styles.css"
             ],
             "scripts": []
@@ -121,7 +120,6 @@
             ],
             "styles": [
               "node_modules/gridstack/dist/gridstack.min.css",
-              "node_modules/gridstack/dist/gridstack-extra.min.css",
               "projects/demo/src/styles.css"
             ],
             "scripts": []
diff --git a/angular/projects/demo/src/app/app.component.ts b/angular/projects/demo/src/app/app.component.ts
index c827d627..4874f9b9 100644
--- a/angular/projects/demo/src/app/app.component.ts
+++ b/angular/projects/demo/src/app/app.component.ts
@@ -56,7 +56,7 @@ export class AppComponent implements OnInit {
   // nested grid options
   private subOptions: GridStackOptions = {
     cellHeight: 50, // should be 50 - top/bottom
-    column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
+    column: 'auto', // size to match container
     acceptWidgets: true, // will accept .grid-stack-item by default
     margin: 5,
   };
diff --git a/demo/column.html b/demo/column.html
index bed7fc05..61433ba6 100644
--- a/demo/column.html
+++ b/demo/column.html
@@ -7,7 +7,6 @@
   <title>Column grid demo</title>
 
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 </head>
 <body>
diff --git a/demo/mobile.html b/demo/mobile.html
index 6018bc3f..6cbdb36a 100644
--- a/demo/mobile.html
+++ b/demo/mobile.html
@@ -7,7 +7,6 @@
   <title>Simple mobile demo</title>
 
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 
 </head>
diff --git a/demo/nested.html b/demo/nested.html
index 9366b60f..2f80b9e7 100644
--- a/demo/nested.html
+++ b/demo/nested.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Nested grids demo</title>
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.min.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 </head>
 <body>
diff --git a/demo/nested_advanced.html b/demo/nested_advanced.html
index 9b9fd136..8d7febce 100644
--- a/demo/nested_advanced.html
+++ b/demo/nested_advanced.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Advance Nested grids demo</title>
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.min.css"/> <!-- required for [2-11] column of sub-grids -->
   <!-- test using CSS rather than minRow -->
   <style type="text/css">
     .container-fluid > .grid-stack { min-height: 250px}
@@ -19,7 +18,6 @@ <h1>Advanced Nested grids demo</h1>
     <p>Create sub-grids (darker background) on the fly, by dragging items completely over others (nest) vs partially (push) using
       the new v7 API <code>GridStackOptions.subGridDynamic=true</code></p>
     <p>This will use the new delay drag&drop option <code>DDDragOpt.pause</code> to tell the gesture difference</p>
-    <p>Note: <code>gridstack-extra.min.css</code> is required for [2-11] column of sub-grids</p>
     <a class="btn btn-primary" onClick="addMainWidget()" href="#">Add Widget</a>
     <a class="btn btn-primary" onClick="addNewWidget(0)" href="#">Add W Grid0</a>
     <a class="btn btn-primary" onClick="addNewWidget(1)" href="#">Add W Grid1</a>
@@ -41,7 +39,7 @@ <h1>Advanced Nested grids demo</h1>
   <script type="text/javascript">
     let subOptions = {
       cellHeight: 50, // should be 50 - top/bottom
-      column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
+      column: 'auto', // size to match container
       acceptWidgets: true, // will accept .grid-stack-item by default
       margin: 5,
       subGridDynamic: true, // make it recursive for all future sub-grids
diff --git a/demo/nested_constraint.html b/demo/nested_constraint.html
index 615ba5e7..86c39f98 100644
--- a/demo/nested_constraint.html
+++ b/demo/nested_constraint.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Constraint nested grids demo</title>
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.min.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
   <style type="text/css">
     .grid-stack-item.sub .grid-stack-item-content {
@@ -41,7 +40,7 @@ <h1>Constraint Nested grids demo</h1>
     [...sub1, ...sub2].forEach(d => d.content = String(count++));
     let subOptions = {
       cellHeight: 50,
-      column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
+      column: 'auto', // size to match container
       itemClass: 'sub', // style sub items differently and use to prevent dragging in/out
       acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted
       margin: 2,
diff --git a/demo/old_nested-jq.html b/demo/old_nested-jq.html
index 4f320ab0..0bccb24c 100644
--- a/demo/old_nested-jq.html
+++ b/demo/old_nested-jq.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Nested JQuery grids demo (old v5.1.1) which never worked fully</title>
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.min.css"/>
   <script src="https://cdn.jsdelivr.net/npm/gridstack@5.1.1/dist/gridstack-jq.js"></script>
   <style type="text/css">
     /* make nested grids have slightly darker bg */
@@ -57,7 +56,7 @@ <h1>Nested JQuery grids demo</h1>
     [...sub1, ...sub2].forEach(d => d.content = String(count++));
     let subOptions = {
       cellHeight: 50, // should be 50 - top/bottom
-      column: 'auto', // size to match container. make sure to include gridstack-extra.min.css
+      column: 'auto', // size to match container
       acceptWidgets: true, // will accept .grid-stack-item by default
       margin: 5,
       draggable: {
diff --git a/demo/old_two-jq.html b/demo/old_two-jq.html
index 176f726e..28c0bc52 100644
--- a/demo/old_two-jq.html
+++ b/demo/old_two-jq.html
@@ -8,7 +8,6 @@
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
 
   <script src="https://cdn.jsdelivr.net/npm/gridstack@5.1.1/dist/gridstack-jq.js"></script>
 </head>
diff --git a/demo/react-hooks-controlled-multiple.html b/demo/react-hooks-controlled-multiple.html
index 460246c0..7118fe5b 100644
--- a/demo/react-hooks-controlled-multiple.html
+++ b/demo/react-hooks-controlled-multiple.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Gridstack.js React integration example</title>
   <link rel="stylesheet" href="https://github.com/demo.css" />
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 
   <!-- Scripts to use react inside html - DEVELOPMENT FILES -->
diff --git a/demo/responsive.html b/demo/responsive.html
index f4ced3e5..080b5dbe 100644
--- a/demo/responsive.html
+++ b/demo/responsive.html
@@ -4,7 +4,6 @@
   <title>Responsive column</title>
 
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 </head>
 <body>
diff --git a/demo/responsive_break.html b/demo/responsive_break.html
index 173b444f..86aba95f 100644
--- a/demo/responsive_break.html
+++ b/demo/responsive_break.html
@@ -4,7 +4,6 @@
   <title>Responsive breakpoint</title>
 
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 </head>
 <body>
diff --git a/demo/responsive_none.html b/demo/responsive_none.html
index eab8b7ff..b36e0500 100644
--- a/demo/responsive_none.html
+++ b/demo/responsive_none.html
@@ -7,7 +7,6 @@
   <title>Responsive layout:'none'</title>
 
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 
 </head>
diff --git a/demo/sizeToContent.html b/demo/sizeToContent.html
index be607e0c..8d5b2904 100644
--- a/demo/sizeToContent.html
+++ b/demo/sizeToContent.html
@@ -7,7 +7,6 @@
   <title>sizeToContent demo</title>
 
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
   <style type="text/css">
     .grid-stack-item-content {
diff --git a/demo/two.html b/demo/two.html
index 0d992af3..bd3bf9ca 100644
--- a/demo/two.html
+++ b/demo/two.html
@@ -8,7 +8,6 @@
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://github.com/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <style type="text/css">
     .with-lines { border: 1px dotted #777}
   </style>
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 00952538..da5ff21d 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -5,7 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [11.5.0-dev (TBD)](#1150-dev-tbd)
+- [12-dev (TBD)](#12-dev-tbd)
 - [11.5.1 (2025-03-23)](#1151-2025-03-23)
 - [11.5.0 (2025-03-16)](#1150-2025-03-16)
 - [11.4.0 (2025-02-27)](#1140-2025-02-27)
@@ -123,8 +123,9 @@ Change log
 - [v0.1.0 (2014-11-18)](#v010-2014-11-18)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
-## 11.5.0-dev (TBD)
+## 12-dev (TBD)
 * feat: [#2854](https://github.com/gridstack/gridstack.js/pull/2854) Removed dynamic stylesheet and migrated to CSS vars. Thank you [lmartorella](https://github.com/lmartorella)
+* feat: [#3013](https://github.com/gridstack/gridstack.js/pull/3013) columns no longer require custom classes nor `gridstack-extra.css` as we now use CSS vars.
 
 ## 11.5.1 (2025-03-23)
 * revert: [#2981](https://github.com/gridstack/gridstack.js/issues/2981) Locked was incorrectly changed. fixed doc instead
diff --git a/doc/README.md b/doc/README.md
index 21441b45..e4c31a9e 100644
--- a/doc/README.md
+++ b/doc/README.md
@@ -405,8 +405,6 @@ Gets current cell width (grid width / # of columns).
 
 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.
-Requires `gridstack-extra.css` (or minimized version) for [2-11],
-else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
 
 - `column` - Integer > 0 (default 12)
 - `layout` - specify the type of re-layout that will happen (position, size, etc...). Values are: `'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none' | ((column: number, oldColumn: number, nodes: GridStackNode[], oldNodes: GridStackNode[]) => void);`
diff --git a/react/README.md b/react/README.md
index 38185e28..33ed2154 100644
--- a/react/README.md
+++ b/react/README.md
@@ -20,7 +20,6 @@ import {
   GridStackRenderProvider,
 } from "path/to/lib";
 import "gridstack/dist/gridstack.css";
-import "gridstack/dist/gridstack-extra.css";
 import "path/to/demo.css";
 
 function Text({ content }: { content: string }) {
diff --git a/react/src/demo/demo.tsx b/react/src/demo/demo.tsx
index 2e1499b5..6b02be90 100644
--- a/react/src/demo/demo.tsx
+++ b/react/src/demo/demo.tsx
@@ -9,7 +9,6 @@ import {
   useGridStackContext,
 } from "../../lib";
 
-import "gridstack/dist/gridstack-extra.css";
 import "gridstack/dist/gridstack.css";
 import "./demo.css";
 
diff --git a/react/src/main.tsx b/react/src/main.tsx
index 0bf19b8c..52f705e3 100644
--- a/react/src/main.tsx
+++ b/react/src/main.tsx
@@ -2,7 +2,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
-import 'gridstack/dist/gridstack-extra.css';
 import 'gridstack/dist/gridstack.css';
 
 import App from './App.tsx'
diff --git a/spec/e2e/html/1571_drop_onto_full.html b/spec/e2e/html/1571_drop_onto_full.html
index b15eb927..24f9834a 100644
--- a/spec/e2e/html/1571_drop_onto_full.html
+++ b/spec/e2e/html/1571_drop_onto_full.html
@@ -9,7 +9,6 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://github.com/demo/demo.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
 
   <style type="text/css">
     .grid-stack-item-removing {
diff --git a/spec/e2e/html/1785_column_many_switch.html b/spec/e2e/html/1785_column_many_switch.html
index 8dde2e8b..ba53b848 100644
--- a/spec/e2e/html/1785_column_many_switch.html
+++ b/spec/e2e/html/1785_column_many_switch.html
@@ -7,7 +7,6 @@
   <title>Changing Column a lot</title>
 
   <link rel="stylesheet" href="https://github.com/demo/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.min.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 
 </head>
diff --git a/spec/e2e/html/2384_update_content.html b/spec/e2e/html/2384_update_content.html
index b1444e20..2881b89a 100644
--- a/spec/e2e/html/2384_update_content.html
+++ b/spec/e2e/html/2384_update_content.html
@@ -2,7 +2,6 @@
 <head>
   <title>Nested grid update content</title>
   <link rel="stylesheet" href="https://github.com/demo/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.min.css"/>
   <style type="text/css">
     .grid-stack {
       background: lightgoldenrodyellow;
diff --git a/spec/e2e/html/2394_save_sub_item_moved.html b/spec/e2e/html/2394_save_sub_item_moved.html
index e74bf8de..c7e4e6b7 100644
--- a/spec/e2e/html/2394_save_sub_item_moved.html
+++ b/spec/e2e/html/2394_save_sub_item_moved.html
@@ -7,7 +7,6 @@
   <title>#2394 Save sub item moved</title>
 
   <link rel="stylesheet" href="https://github.com/demo/demo.css" />
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.min.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 
 </head>
diff --git a/spec/e2e/html/2406_inf_loop_autoPosition_column1.html b/spec/e2e/html/2406_inf_loop_autoPosition_column1.html
index 76781c1f..6f8b08db 100644
--- a/spec/e2e/html/2406_inf_loop_autoPosition_column1.html
+++ b/spec/e2e/html/2406_inf_loop_autoPosition_column1.html
@@ -8,7 +8,6 @@
   <title>Float grid demo</title>
 
   <link rel="stylesheet" href="https://github.com/demo/demo.css" />
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css" />
   <script src="https://github.com/dist/gridstack-all.js"></script>
 
 </head>
diff --git a/spec/e2e/html/2453 _recreated_trash.html b/spec/e2e/html/2453 _recreated_trash.html
index b8760041..205c53fb 100644
--- a/spec/e2e/html/2453 _recreated_trash.html	
+++ b/spec/e2e/html/2453 _recreated_trash.html	
@@ -8,7 +8,6 @@
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://github.com/demo/demo.css" />
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css" />
   <script src="https://github.com/dist/gridstack-all.js"></script>
   <style type="text/css">
     .with-lines { border: 1px dotted #777}
diff --git a/spec/e2e/html/2576_insert_column_shift_content.html b/spec/e2e/html/2576_insert_column_shift_content.html
index 95e62b4c..a6bd22a1 100644
--- a/spec/e2e/html/2576_insert_column_shift_content.html
+++ b/spec/e2e/html/2576_insert_column_shift_content.html
@@ -8,7 +8,6 @@
   <title>Column insert bug #2576</title>
   <link rel="stylesheet" href="https://github.com/demo/demo.css" />
   <script src="https://github.com/dist/gridstack-all.js"></script>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
 </head>
 
 <body>
diff --git a/spec/e2e/html/2864_nested_resize_reflow.html b/spec/e2e/html/2864_nested_resize_reflow.html
index a325604e..a9e1c2d2 100644
--- a/spec/e2e/html/2864_nested_resize_reflow.html
+++ b/spec/e2e/html/2864_nested_resize_reflow.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>2864 nest grid resize</title>
   <link rel="stylesheet" href="https://github.com/demo/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 </head>
 <body>
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
index 0fc34e53..bdd9ee2d 100644
--- a/spec/gridstack-spec.ts
+++ b/spec/gridstack-spec.ts
@@ -271,10 +271,10 @@ describe('gridstack >', function() {
       let items = Utils.getElements('.grid-stack-item');
       grid.column(9);
       expect(grid.getColumn()).toBe(9);
-      items.forEach(el => expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0));
+      items.forEach(el => expect(el.getAttribute('gs-y')).toBe(null));
       grid.column(12);
       expect(grid.getColumn()).toBe(12);
-      items.forEach(el => expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0));
+      items.forEach(el => expect(el.getAttribute('gs-y')).toBe(null));
     });
     it('no sizing, no moving >', function() {
       grid = GridStack.init({column: 12});
@@ -282,8 +282,8 @@ describe('gridstack >', function() {
       grid.column(8, 'none');
       expect(grid.getColumn()).toBe(8);
       items.forEach(el => {
-        expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4);
-        expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0);
+        expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+        expect(el.getAttribute('gs-y')).toBe(null);
       });
     });
     it('no sizing, but moving down >', function() {
@@ -291,9 +291,9 @@ describe('gridstack >', function() {
       let items = Utils.getElements('.grid-stack-item');
       grid.column(7, 'move');
       expect(grid.getColumn()).toBe(7);
-      items.forEach(el => expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4));
-      expect(parseInt(items[0].getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(items[1].getAttribute('gs-y'), 10)).toBe(2);
+      items.forEach(el => expect(parseInt(el.getAttribute('gs-w'))).toBe(4));
+      expect(items[0].getAttribute('gs-y')).toBe(null);
+      expect(parseInt(items[1].getAttribute('gs-y'))).toBe(2);
     });
     it('should change column number and re-layout items >', function() {
       let options = {
@@ -305,25 +305,25 @@ describe('gridstack >', function() {
       let el2 = document.getElementById('item2')
 
       // items start at 4x2 and 4x4
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-      expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
+      expect(el1.getAttribute('gs-y')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-w'))).toBe(4);
       expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
 
       expect(parseInt(el2.getAttribute('gs-x'))).toBe(4);
-      expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
+      expect(el2.getAttribute('gs-y')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-w'))).toBe(4);
       expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
 
       // 1 column will have item1, item2
       grid.column(1);
       expect(grid.getColumn()).toBe(1);
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-      expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
+      expect(el1.getAttribute('gs-y')).toBe(null);
       expect(el1.getAttribute('gs-w')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
 
-      expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
+      expect(el2.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
       expect(el2.getAttribute('gs-w')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
@@ -331,7 +331,7 @@ describe('gridstack >', function() {
       // add default 1x1 item to the end (1 column)
       let el3 = grid.addWidget({content:'new'});
       expect(el3).not.toBe(null);
-      expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
+      expect(el3.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
       expect(el3.getAttribute('gs-w')).toBe(null);
       expect(el3.getAttribute('gs-h')).toBe(null);
@@ -339,20 +339,20 @@ describe('gridstack >', function() {
       // back to 12 column and initial layout (other than new item3)
       grid.column(12);
       expect(grid.getColumn()).toBe(12);
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-      expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
+      expect(el1.getAttribute('gs-y')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-w'))).toBe(4);
       expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
 
       expect(parseInt(el2.getAttribute('gs-x'))).toBe(4);
-      expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
+      expect(el2.getAttribute('gs-y')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-w'))).toBe(4);
       expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
 
       // TODO: we don't remembers autoPlacement (cleared multiple places)
       // expect(parseInt(el3.getAttribute('gs-x'))).toBe(8);
-      // expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
-      expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
+      // expect(el3.getAttribute('gs-y')).toBe(null);
+      expect(el3.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
       expect(el3.getAttribute('gs-w')).toBe(null);
       expect(el3.getAttribute('gs-h')).toBe(null);
@@ -360,34 +360,34 @@ describe('gridstack >', function() {
       // back to 1 column
       grid.column(1);
       expect(grid.getColumn()).toBe(1);
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-      expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
+      expect(el1.getAttribute('gs-y')).toBe(null);
       expect(el1.getAttribute('gs-w')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
 
-      expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
+      expect(el2.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
       expect(el2.getAttribute('gs-w')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
 
-      expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
+      expect(el3.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el3.getAttribute('gs-y'))).toBe(6);
       expect(el3.getAttribute('gs-w')).toBe(null);
       expect(el3.getAttribute('gs-h')).toBe(null);
 
       // move item2 to beginning to [3][1][2] vertically
       grid.update(el3, {x:0, y:0});
-      expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
-      expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
+      expect(el3.getAttribute('gs-x')).toBe(null);
+      expect(el3.getAttribute('gs-y')).toBe(null);
       expect(el3.getAttribute('gs-w')).toBe(null);
       expect(el3.getAttribute('gs-h')).toBe(null);
 
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
       expect(el1.getAttribute('gs-w')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
 
-      expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
+      expect(el2.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-y'))).toBe(3);
       expect(el2.getAttribute('gs-w')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-h'))).toBe(4);
@@ -395,12 +395,12 @@ describe('gridstack >', function() {
       // back to 12 column, el3 to be beginning still, but [1][2] to be in 1 columns still but wide 4x2 and 4x still
       grid.column(12);
       expect(grid.getColumn()).toBe(12);
-      expect(parseInt(el3.getAttribute('gs-x'))).toBe(0); // 8 TEST WHY
-      expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
+      expect(el3.getAttribute('gs-x')).toBe(null); // 8 TEST WHY
+      expect(el3.getAttribute('gs-y')).toBe(null);
       expect(el3.getAttribute('gs-w')).toBe(null);
       expect(el3.getAttribute('gs-h')).toBe(null);
 
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
       expect(parseInt(el1.getAttribute('gs-w'))).toBe(4);
       expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
@@ -415,12 +415,12 @@ describe('gridstack >', function() {
       grid.column(2);
       expect(grid.getColumn()).toBe(2);
 
-      expect(parseInt(el3.getAttribute('gs-x'))).toBe(0); // 1 TEST WHY
-      expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
+      expect(el3.getAttribute('gs-x')).toBe(null); // 1 TEST WHY
+      expect(el3.getAttribute('gs-y')).toBe(null);
       expect(el3.getAttribute('gs-w')).toBe(null); // 1 as we scaled from 12 columns
       expect(el3.getAttribute('gs-h')).toBe(null);
 
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
       expect(el1.getAttribute('gs-w')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-h'))).toBe(2);
@@ -517,34 +517,34 @@ describe('gridstack >', function() {
   //     grid.batchUpdate(false);
       
   //     // items are item1[1x1], item3[1x1], item2[2x1]
-  //     expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-  //     expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+  //     expect(el1.getAttribute('gs-x')).toBe(null);
+  //     expect(el1.getAttribute('gs-y')).toBe(null);
   //     expect(el1.getAttribute('gs-w')).toBe(null);
   //     expect(el1.getAttribute('gs-h')).toBe(null);
 
   //     expect(parseInt(el3.getAttribute('gs-x'))).toBe(1);
-  //     expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
+  //     expect(el3.getAttribute('gs-y')).toBe(null);
   //     expect(el3.getAttribute('gs-w')).toBe(null);
   //     expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
 
   //     expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
-  //     expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
+  //     expect(el2.getAttribute('gs-y')).toBe(null);
   //     expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
   //     expect(el2.getAttribute('gs-h')).toBe(null);
 
   //     // items are item1[1x1], item3[1x2], item2[1x1] in 1 column
   //     grid.column(1);
-  //     expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-  //     expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+  //     expect(el1.getAttribute('gs-x')).toBe(null);
+  //     expect(el1.getAttribute('gs-y')).toBe(null);
   //     expect(el1.getAttribute('gs-w')).toBe(null);
   //     expect(el1.getAttribute('gs-h')).toBe(null);
 
-  //     expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
+  //     expect(el3.getAttribute('gs-x')).toBe(null);
   //     expect(parseInt(el3.getAttribute('gs-y'))).toBe(1);
   //     expect(el3.getAttribute('gs-w')).toBe(null);
   //     expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
 
-  //     expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
+  //     expect(el2.getAttribute('gs-x')).toBe(null);
   //     expect(parseInt(el2.getAttribute('gs-y'))).toBe(3);
   //     expect(el2.getAttribute('gs-w')).toBe(null);
   //     expect(el2.getAttribute('gs-h')).toBe(null);
@@ -561,34 +561,34 @@ describe('gridstack >', function() {
   //     let el3 = grid.addWidget({x:1, y:0, w:1, h:2});
 
   //     // items are item1[1x1], item3[1x1], item2[2x1]
-  //     expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-  //     expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+  //     expect(el1.getAttribute('gs-x')).toBe(null);
+  //     expect(el1.getAttribute('gs-y')).toBe(null);
   //     expect(el1.getAttribute('gs-w')).toBe(null);
   //     expect(el1.getAttribute('gs-h')).toBe(null);
 
   //     expect(parseInt(el3.getAttribute('gs-x'))).toBe(1);
-  //     expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
+  //     expect(el3.getAttribute('gs-y')).toBe(null);
   //     expect(el3.getAttribute('gs-w')).toBe(null);
   //     expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
 
   //     expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
-  //     expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
+  //     expect(el2.getAttribute('gs-y')).toBe(null);
   //     expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
   //     expect(el2.getAttribute('gs-h')).toBe(null);
 
   //     // items are item1[1x1], item2[1x1], item3[1x2] in 1 column dom ordered
   //     grid.column(1);
-  //     expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-  //     expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+  //     expect(el1.getAttribute('gs-x')).toBe(null);
+  //     expect(el1.getAttribute('gs-y')).toBe(null);
   //     expect(el1.getAttribute('gs-w')).toBe(null);
   //     expect(el1.getAttribute('gs-h')).toBe(null);
 
-  //     expect(parseInt(el2.getAttribute('gs-x'))).toBe(0);
+  //     expect(el2.getAttribute('gs-x')).toBe(null);
   //     expect(parseInt(el2.getAttribute('gs-y'))).toBe(1);
   //     expect(el2.getAttribute('gs-w')).toBe(null);
   //     expect(el2.getAttribute('gs-h')).toBe(null);
 
-  //     expect(parseInt(el3.getAttribute('gs-x'))).toBe(0);
+  //     expect(el3.getAttribute('gs-x')).toBe(null);
   //     expect(parseInt(el3.getAttribute('gs-y'))).toBe(2);
   //     expect(el3.getAttribute('gs-w')).toBe(null);
   //     expect(parseInt(el3.getAttribute('gs-h'))).toBe(2);
@@ -828,8 +828,8 @@ describe('gridstack >', function() {
       let items = Utils.getElements('.grid-stack-item');
       items.forEach(oldEl => {
         let el = grid.makeWidget(oldEl);
-        expect(parseInt(oldEl.getAttribute('gs-x'), 10)).toBe(parseInt(el.getAttribute('gs-x'), 10));
-        expect(parseInt(oldEl.getAttribute('gs-y'), 10)).toBe(parseInt(el.getAttribute('gs-y'), 10));
+        expect(oldEl.getAttribute('gs-x')).toBe(el.getAttribute('gs-x'));
+        expect(oldEl.getAttribute('gs-y')).toBe(el.getAttribute('gs-y'));
       })
     });
     it('should not allow same x, y coordinates for widgets. >', function() {
@@ -842,7 +842,7 @@ describe('gridstack >', function() {
       items.forEach(oldEl => {
         let el = oldEl.cloneNode(true) as HTMLElement;
         el = grid.makeWidget(el);
-        expect(parseInt(el.getAttribute('gs-y'), 10)).not.toBe(parseInt(oldEl.getAttribute('gs-y'), 10));
+        expect(el.getAttribute('gs-y')).not.toBe(oldEl.getAttribute('gs-y'));
       });
     });
   });
@@ -859,10 +859,10 @@ describe('gridstack >', function() {
       let w = grid.addWidget({x: 6, y:7, w:2, h:3, autoPosition:false,
         minW:1, maxW:4, minH:2, maxH:5, id:'coolWidget'});
       
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(6);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(7);
-      expect(parseInt(w.getAttribute('gs-w'), 10)).toBe(2);
-      expect(parseInt(w.getAttribute('gs-h'), 10)).toBe(3);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(6);
+      expect(parseInt(w.getAttribute('gs-y'))).toBe(7);
+      expect(parseInt(w.getAttribute('gs-w'))).toBe(2);
+      expect(parseInt(w.getAttribute('gs-h'))).toBe(3);
       expect(w.getAttribute('gs-auto-position')).toBe(null);
       expect(w.getAttribute('gs-id')).toBe('coolWidget');
 
@@ -870,20 +870,20 @@ describe('gridstack >', function() {
       expect(grid.getFloat()).toBe(true);
       grid.float(false);
       expect(grid.getFloat()).toBe(false);
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(6);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(4); // <--- from 7 to 4 below second original widget
-      expect(parseInt(w.getAttribute('gs-w'), 10)).toBe(2);
-      expect(parseInt(w.getAttribute('gs-h'), 10)).toBe(3);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(6);
+      expect(parseInt(w.getAttribute('gs-y'))).toBe(4); // <--- from 7 to 4 below second original widget
+      expect(parseInt(w.getAttribute('gs-w'))).toBe(2);
+      expect(parseInt(w.getAttribute('gs-h'))).toBe(3);
       expect(w.getAttribute('gs-auto-position')).toBe(null);
       expect(w.getAttribute('gs-id')).toBe('coolWidget');
 
       // should not move again (no-op)
       grid.float(true);
       expect(grid.getFloat()).toBe(true);
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(6);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(4);
-      expect(parseInt(w.getAttribute('gs-w'), 10)).toBe(2);
-      expect(parseInt(w.getAttribute('gs-h'), 10)).toBe(3);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(6);
+      expect(parseInt(w.getAttribute('gs-y'))).toBe(4);
+      expect(parseInt(w.getAttribute('gs-w'))).toBe(2);
+      expect(parseInt(w.getAttribute('gs-h'))).toBe(3);
       expect(w.getAttribute('gs-auto-position')).toBe(null);
       expect(w.getAttribute('gs-id')).toBe('coolWidget');
     });
@@ -916,10 +916,10 @@ describe('gridstack >', function() {
       grid = GridStack.init();
       let w = grid.addWidget({h: 2, id: 'optionWidget'});
       
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(8);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(0);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+      expect(w.getAttribute('gs-y')).toBe(null);
       expect(w.getAttribute('gs-w')).toBe(null);
-      expect(parseInt(w.getAttribute('gs-h'), 10)).toBe(2);
+      expect(parseInt(w.getAttribute('gs-h'))).toBe(2);
       // expect(w.getAttribute('gs-auto-position')).toBe('true');
       expect(w.getAttribute('gs-id')).toBe('optionWidget');
     });
@@ -927,10 +927,10 @@ describe('gridstack >', function() {
       grid = GridStack.init();
       let w = grid.addWidget({y: 9, h: 2, id: 'optionWidget'});
       
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(8);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(0);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+      expect(w.getAttribute('gs-y')).toBe(null);
       expect(w.getAttribute('gs-w')).toBe(null);
-      expect(parseInt(w.getAttribute('gs-h'), 10)).toBe(2);
+      expect(parseInt(w.getAttribute('gs-h'))).toBe(2);
       // expect(w.getAttribute('gs-auto-position')).toBe('true');
       expect(w.getAttribute('gs-id')).toBe('optionWidget');
     });
@@ -938,10 +938,10 @@ describe('gridstack >', function() {
       grid = GridStack.init();
       let w = grid.addWidget({x: 9, h: 2, id: 'optionWidget'});
       
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(8);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(0);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+      expect(w.getAttribute('gs-y')).toBe(null);
       expect(w.getAttribute('gs-w')).toBe(null);
-      expect(parseInt(w.getAttribute('gs-h'), 10)).toBe(2);
+      expect(parseInt(w.getAttribute('gs-h'))).toBe(2);
       // expect(w.getAttribute('gs-auto-position')).toBe('true');
       expect(w.getAttribute('gs-id')).toBe('optionWidget');
     });
@@ -949,10 +949,10 @@ describe('gridstack >', function() {
       grid = GridStack.init();
       let w = grid.addWidget({x: 8, h: 2, id: 'optionWidget'});
       
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(8);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(0);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+      expect(w.getAttribute('gs-y')).toBe(null);
       expect(w.getAttribute('gs-w')).toBe(null);
-      expect(parseInt(w.getAttribute('gs-h'), 10)).toBe(2);
+      expect(parseInt(w.getAttribute('gs-h'))).toBe(2);
       // expect(w.getAttribute('gs-auto-position')).toBe('true');
       expect(w.getAttribute('gs-id')).toBe('optionWidget');
     });
@@ -960,8 +960,8 @@ describe('gridstack >', function() {
       grid = GridStack.init();
       let w = grid.addWidget({ });
       
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(8);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(0);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+      expect(w.getAttribute('gs-y')).toBe(null);
       expect(w.getAttribute('gs-w')).toBe(null);
       expect(w.getAttribute('gs-h')).toBe(null);
       // expect(w.getAttribute('gs-auto-position')).toBe('true');
@@ -980,8 +980,8 @@ describe('gridstack >', function() {
       grid = GridStack.init();
       let w = grid.addWidget({x: 'foo', y: null, w: 'bar', h: ''} as any);
       
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(8);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(0);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+      expect(w.getAttribute('gs-y')).toBe(null);
       expect(w.getAttribute('gs-w')).toBe(null);
       expect(w.getAttribute('gs-h')).toBe(null);
     });
@@ -991,9 +991,9 @@ describe('gridstack >', function() {
       d.innerHTML = '<div class="grid-stack-item" gs-w="3" gs-max-w="4" gs-id="gsfoo" id="foo"><div class="grid-stack-item-content">foo content</div></div>';
       grid.el.appendChild(d.firstChild);
       let w = grid.makeWidget('foo');
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(8);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(w.getAttribute('gs-w'), 10)).toBe(3);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+      expect(w.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(w.getAttribute('gs-w'))).toBe(3);
       expect(w.gridstackNode.maxW).toBe(4);
       expect(w.getAttribute('gs-h')).toBe(null);
       expect(w.getAttribute('gs-id')).toBe('gsfoo');
@@ -1005,9 +1005,9 @@ describe('gridstack >', function() {
       grid.el.appendChild(d.firstChild);
       let w = grid.makeWidget('foo', {x:null, y:null, w:2});
       
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(8);
-      expect(parseInt(w.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(w.getAttribute('gs-w'), 10)).toBe(2);
+      expect(parseInt(w.getAttribute('gs-x'))).toBe(8);
+      expect(w.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(w.getAttribute('gs-w'))).toBe(2);
       expect(w.getAttribute('gs-h')).toBe(null);
     });
   });
@@ -1026,7 +1026,7 @@ describe('gridstack >', function() {
       let el = doc.body.children[0] as HTMLElement;
       grid.el.appendChild(el);
       let w = grid.makeWidget(el);
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(0);
+      expect(w.getAttribute('gs-x')).toBe(null);
     });
     it('passing element float=true >', function() {
       grid = GridStack.init({float: true});
@@ -1035,7 +1035,7 @@ describe('gridstack >', function() {
       let el = doc.body.children[0] as HTMLElement;
       grid.el.appendChild(el);
       let w = grid.makeWidget(el);
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(0);
+      expect(w.getAttribute('gs-x')).toBe(null);
     });
     it('passing class >', function() {
       grid = GridStack.init();
@@ -1044,7 +1044,7 @@ describe('gridstack >', function() {
       let el = doc.body.children[0] as HTMLElement;
       grid.el.appendChild(el);
       let w = grid.makeWidget('.item');
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(0);
+      expect(w.getAttribute('gs-x')).toBe(null);
     });
     it('passing class no dot >', function() {
       grid = GridStack.init();
@@ -1053,7 +1053,7 @@ describe('gridstack >', function() {
       let el = doc.body.children[0] as HTMLElement;
       grid.el.appendChild(el);
       let w = grid.makeWidget('item');
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(0);
+      expect(w.getAttribute('gs-x')).toBe(null);
     });
     it('passing id >', function() {
       grid = GridStack.init();
@@ -1062,7 +1062,7 @@ describe('gridstack >', function() {
       let el = doc.body.children[0] as HTMLElement;
       grid.el.appendChild(el);
       let w = grid.makeWidget('#item');
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(0);
+      expect(w.getAttribute('gs-x')).toBe(null);
     });
     it('passing id no # >', function() {
       grid = GridStack.init();
@@ -1071,7 +1071,7 @@ describe('gridstack >', function() {
       let el = doc.body.children[0] as HTMLElement;
       grid.el.appendChild(el);
       let w = grid.makeWidget('item');
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(0);
+      expect(w.getAttribute('gs-x')).toBe(null);
     });
     it('passing id as number >', function() {
       grid = GridStack.init();
@@ -1080,7 +1080,7 @@ describe('gridstack >', function() {
       let el = doc.body.children[0] as HTMLElement;
       grid.el.appendChild(el);
       let w = grid.makeWidget('1');
-      expect(parseInt(w.getAttribute('gs-x'), 10)).toBe(0);
+      expect(w.getAttribute('gs-x')).toBe(null);
     });
   });
 
@@ -1155,8 +1155,8 @@ describe('gridstack >', function() {
       grid = GridStack.init(options);
       let items = Utils.getElements('.grid-stack-item');
       grid.update(items[0], {w:5, h:5});
-      expect(parseInt(items[0].getAttribute('gs-w'), 10)).toBe(5);
-      expect(parseInt(items[0].getAttribute('gs-h'), 10)).toBe(5);
+      expect(parseInt(items[0].getAttribute('gs-w'))).toBe(5);
+      expect(parseInt(items[0].getAttribute('gs-h'))).toBe(5);
     });
   });
 
@@ -1176,8 +1176,8 @@ describe('gridstack >', function() {
       grid = GridStack.init(options);
       let items = Utils.getElements('.grid-stack-item');
       grid.update(items[0], {x:5, y:5});
-      expect(parseInt(items[0].getAttribute('gs-x'), 10)).toBe(5);
-      expect(parseInt(items[0].getAttribute('gs-y'), 10)).toBe(5);
+      expect(parseInt(items[0].getAttribute('gs-x'))).toBe(5);
+      expect(parseInt(items[0].getAttribute('gs-y'))).toBe(5);
     });
   });
 
@@ -1191,13 +1191,13 @@ describe('gridstack >', function() {
     it('should move and resize widget >', function() {
       grid = GridStack.init({float: true});
       let el = Utils.getElements('.grid-stack-item')[1];
-      expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4);
+      expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
       
       grid.update(el, {x: 5, y: 4, h: 2});
-      expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(5);
-      expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(2);
+      expect(parseInt(el.getAttribute('gs-x'))).toBe(5);
+      expect(parseInt(el.getAttribute('gs-y'))).toBe(4);
+      expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+      expect(parseInt(el.getAttribute('gs-h'))).toBe(2);
     });
     it('should change noMove >', function() {
       grid = GridStack.init({float: true});
@@ -1213,10 +1213,10 @@ describe('gridstack >', function() {
       expect(dd.isResizable(items[0])).toBe(true);
       expect(dd.isDraggable(items[0])).toBe(true);
 
-      expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(4);
+      expect(parseInt(el.getAttribute('gs-x'))).toBe(4);
+      expect(el.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+      expect(parseInt(el.getAttribute('gs-h'))).toBe(4);
     });
     it('should change content and id, and move >', function() {
       grid = GridStack.init({float: true});
@@ -1227,10 +1227,10 @@ describe('gridstack >', function() {
       expect(el.gridstackNode.id).toBe('newID');
       expect(el.getAttribute('gs-id')).toBe('newID');
       expect(sub.innerHTML).toBe('new content');
-      expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(1);
-      expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(4);
+      expect(parseInt(el.getAttribute('gs-x'))).toBe(4);
+      expect(parseInt(el.getAttribute('gs-y'))).toBe(1);
+      expect(parseInt(el.getAttribute('gs-w'))).toBe(4);
+      expect(parseInt(el.getAttribute('gs-h'))).toBe(4);
     });
     it('should change max and constrain a wanted resize >', function() {
       grid = GridStack.init({float: true});
@@ -1238,10 +1238,10 @@ describe('gridstack >', function() {
       expect(el.getAttribute('gs-max-w')).toBe(null);
 
       grid.update(el, {maxW: 2, w: 5});
-      expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(2);
-      expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(4);
+      expect(parseInt(el.getAttribute('gs-x'))).toBe(4);
+      expect(el.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(el.getAttribute('gs-w'))).toBe(2);
+      expect(parseInt(el.getAttribute('gs-h'))).toBe(4);
       expect(el.gridstackNode.maxW).toBe(2);
     });
     it('should change max and constrain existing >', function() {
@@ -1250,10 +1250,10 @@ describe('gridstack >', function() {
       expect(el.getAttribute('gs-max-w')).toBe(null);
 
       grid.update(el, {maxW: 2});
-      expect(parseInt(el.getAttribute('gs-x'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(2);
-      expect(parseInt(el.getAttribute('gs-h'), 10)).toBe(4);
+      expect(parseInt(el.getAttribute('gs-x'))).toBe(4);
+      expect(el.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(el.getAttribute('gs-w'))).toBe(2);
+      expect(parseInt(el.getAttribute('gs-h'))).toBe(4);
       expect(el.gridstackNode.maxW).toBe(2);
     });
     it('should change all max and move, no inf loop! >', function() {
@@ -1266,12 +1266,12 @@ describe('gridstack >', function() {
       });
 
       grid.update('.grid-stack-item', {maxW: 2, maxH: 2});
-      expect(parseInt(items[0].getAttribute('gs-x'), 10)).toBe(0);
-      expect(parseInt(items[1].getAttribute('gs-x'), 10)).toBe(4);
+      expect(items[0].getAttribute('gs-x')).toBe(null);
+      expect(parseInt(items[1].getAttribute('gs-x'))).toBe(4);
       items.forEach((item: GridItemHTMLElement) => {
-        expect(parseInt(item.getAttribute('gs-y'), 10)).toBe(0);
-        expect(parseInt(item.getAttribute('gs-h'), 10)).toBe(2);
-        expect(parseInt(item.getAttribute('gs-w'), 10)).toBe(2);
+        expect(item.getAttribute('gs-y')).toBe(null);
+        expect(parseInt(item.getAttribute('gs-h'))).toBe(2);
+        expect(parseInt(item.getAttribute('gs-w'))).toBe(2);
         expect(item.gridstackNode.maxW).toBe(2);
         expect(item.gridstackNode.maxH).toBe(2);
       });
@@ -1312,16 +1312,16 @@ describe('gridstack >', function() {
       grid.margin('10rem');
       expect(grid.getMargin()).toBe(10);
     });
-    it('should not update styles, with same value >', function() {
+    it('should not update css vars, with same value >', function() {
       let options = {
         cellHeight: 80,
         margin: 5
       };
       let grid: any = GridStack.init(options);
       expect(grid.getMargin()).toBe(5);
-      spyOn(grid, '_updateStyles');
+      spyOn(grid, '_initMargin');
       grid.margin('5px');
-      expect(grid._updateStyles).not.toHaveBeenCalled();
+      expect(grid._initMargin).not.toHaveBeenCalled();
       expect(grid.getMargin()).toBe(5);
     });
     it('should set top/bot/left value directly >', function() {
@@ -1377,16 +1377,16 @@ describe('gridstack >', function() {
       expect(grid.opts.marginBottom).toBe(0);
       expect(grid.opts.marginLeft).toBe(3);
     });
-    it('set 2 values, should update style >', function() {
+    it('set 2 values, should update css vars >', function() {
       let options = {
         cellHeight: 80,
         margin: 5
       };
       grid = GridStack.init(options); 
       expect(grid.getMargin()).toBe(5);
-      spyOn(grid as any, '_updateStyles');
+      spyOn(grid as any, '_initMargin');
       grid.margin('1px 0');
-      expect((grid as any)._updateStyles).toHaveBeenCalled();
+      expect((grid as any)._initMargin).toHaveBeenCalled();
       expect(grid.getMargin()).toBe(undefined);
       expect(grid.opts.marginTop).toBe(1);
       expect(grid.opts.marginBottom).toBe(1);
@@ -1621,7 +1621,7 @@ describe('gridstack >', function() {
 
       grid.compact();
       expect(parseInt(el3.getAttribute('gs-x'))).toBe(8);
-      expect(parseInt(el3.getAttribute('gs-y'))).toBe(0);
+      expect(el3.getAttribute('gs-y')).toBe(null);
     });
     it('not move locked item >', function() {
       grid = GridStack.init({float: true});
@@ -1646,11 +1646,11 @@ describe('gridstack >', function() {
     it('not move locked item, size down added one >', function() {
       grid = GridStack.init();
       let el1 = grid.addWidget({x: 0, y: 1, w: 12,  locked: true});
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
 
       let el2 = grid.addWidget({x: 2, y: 0, h: 3});
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
       expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
       expect(parseInt(el2.getAttribute('gs-y'))).toBe(2);
@@ -1799,14 +1799,14 @@ describe('gridstack >', function() {
       grid.load([{id:'gsItem1',x:0,y:0,w:5,h:1},{id:'gsItem2',x:6,y:0,w:2,h:2}]);
 
       let el1 = document.getElementById('item1')
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-      expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
+      expect(el1.getAttribute('gs-y')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
       expect(el1.getAttribute('gs-h')).toBe(null);
 
       let el2 = document.getElementById('item2')
       expect(parseInt(el2.getAttribute('gs-x'))).toBe(6);
-      expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
+      expect(el2.getAttribute('gs-y')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
       expect(parseInt(el2.getAttribute('gs-h'))).toBe(2);
     });
@@ -1821,15 +1821,15 @@ describe('gridstack >', function() {
 
       expect(document.getElementById('item1')).toBe(null);
       let el1 = grid.engine.nodes.find(n => n.id === 'new1').el;
-      expect(parseInt(el1.getAttribute('gs-x'))).toBe(0);
-      expect(parseInt(el1.getAttribute('gs-y'))).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
+      expect(el1.getAttribute('gs-y')).toBe(null);
       expect(parseInt(el1.getAttribute('gs-w'))).toBe(5);
       expect(el1.getAttribute('gs-h')).toBe(null);
 
       expect(document.getElementById('item2')).toBe(null);
       let el2 = grid.engine.nodes.find(n => n.id === 'new2').el;
       expect(parseInt(el2.getAttribute('gs-x'))).toBe(6);
-      expect(parseInt(el2.getAttribute('gs-y'))).toBe(0);
+      expect(el2.getAttribute('gs-y')).toBe(null);
       expect(parseInt(el2.getAttribute('gs-w'))).toBe(2);
       expect(parseInt(el2.getAttribute('gs-h'))).toBe(2);
     });
@@ -1841,7 +1841,8 @@ describe('gridstack >', function() {
     const test = () => {
       items.forEach(item => {
         const n = grid.engine.nodes.find(n => n.id === item.id);
-        expect(parseInt(n.el.getAttribute('gs-y'))).toBe(item.y!);
+        if (item.y) expect(parseInt(n.el.getAttribute('gs-y'))).toBe(item.y!);
+        else expect(n.el.getAttribute('gs-y')).toBe(null);
       });
     }
     beforeEach(function() {
diff --git a/spec/regression-spec.ts b/spec/regression-spec.ts
index 5d296a6c..166673aa 100644
--- a/spec/regression-spec.ts
+++ b/spec/regression-spec.ts
@@ -39,24 +39,24 @@ describe('regression >', function() {
       let el1 = findEl('1');
       let el2 = findEl('2');
 
-      expect(parseInt(el0.getAttribute('gs-x'), 10)).toBe(0);
-      expect(parseInt(el0.getAttribute('gs-y'), 10)).toBe(0);
+      expect(el0.getAttribute('gs-x')).toBe(null);
+      expect(el0.getAttribute('gs-y')).toBe(null);
       expect(el0.children[0].innerHTML).toBe(items[0].content!);
-      expect(parseInt(el1.getAttribute('gs-x'), 10)).toBe(1);
-      expect(parseInt(el1.getAttribute('gs-y'), 10)).toBe(1);
-      expect(parseInt(el2.getAttribute('gs-x'), 10)).toBe(2);
-      expect(parseInt(el2.getAttribute('gs-y'), 10)).toBe(0);
+      expect(parseInt(el1.getAttribute('gs-x'))).toBe(1);
+      expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
+      expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
+      expect(el2.getAttribute('gs-y')).toBe(null);
 
       // loading with changed content should be same positions
       items.forEach(n => n.content += '*')
       grid.load(items);
-      expect(parseInt(el0.getAttribute('gs-x'), 10)).toBe(0);
-      expect(parseInt(el0.getAttribute('gs-y'), 10)).toBe(0);
+      expect(el0.getAttribute('gs-x')).toBe(null);
+      expect(el0.getAttribute('gs-y')).toBe(null);
       expect(el0.children[0].innerHTML).toBe(items[0].content!);
-      expect(parseInt(el1.getAttribute('gs-x'), 10)).toBe(1);
-      expect(parseInt(el1.getAttribute('gs-y'), 10)).toBe(1);
-      expect(parseInt(el2.getAttribute('gs-x'), 10)).toBe(2);
-      expect(parseInt(el2.getAttribute('gs-y'), 10)).toBe(0);
+      expect(parseInt(el1.getAttribute('gs-x'))).toBe(1);
+      expect(parseInt(el1.getAttribute('gs-y'))).toBe(1);
+      expect(parseInt(el2.getAttribute('gs-x'))).toBe(2);
+      expect(el2.getAttribute('gs-y')).toBe(null);
     });
   });
 
@@ -80,30 +80,30 @@ describe('regression >', function() {
       let el1 = findSubEl('1');
       let el2 = findSubEl('2');
       let el3 = findSubEl('3');
-      expect(parseInt(nested.getAttribute('gs-x'), 10)).toBe(0);
-      expect(parseInt(nested.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(nested.getAttribute('gs-w'), 10)).toBe(3);
+      expect(nested.getAttribute('gs-x')).toBe(null);
+      expect(nested.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(nested.getAttribute('gs-w'))).toBe(3);
       expect(nested.getAttribute('gs-h')).toBe(null); // sizeToContent 3 -> 1 which is null
-      expect(parseInt(el1.getAttribute('gs-x'), 10)).toBe(0);
-      expect(parseInt(el1.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(el2.getAttribute('gs-x'), 10)).toBe(1);
-      expect(parseInt(el2.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(el3.getAttribute('gs-x'), 10)).toBe(2);
-      expect(parseInt(el3.getAttribute('gs-y'), 10)).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
+      expect(el1.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(el2.getAttribute('gs-x'))).toBe(1);
+      expect(el2.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(el3.getAttribute('gs-x'))).toBe(2);
+      expect(el3.getAttribute('gs-y')).toBe(null);
 
       // now resize the nested grid to 2 -> should reflow el3
       grid.update(nested, {w:2});
-      expect(parseInt(nested.getAttribute('gs-x'), 10)).toBe(0);
-      expect(parseInt(nested.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(nested.getAttribute('gs-w'), 10)).toBe(2);
+      expect(nested.getAttribute('gs-x')).toBe(null);
+      expect(nested.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(nested.getAttribute('gs-w'))).toBe(2);
       expect(nested.getAttribute('gs-h')).toBe(null); // sizeToContent not called until some delay
-      expect(parseInt(el1.getAttribute('gs-x'), 10)).toBe(0);
-      expect(parseInt(el1.getAttribute('gs-y'), 10)).toBe(0);
-      expect(parseInt(el2.getAttribute('gs-x'), 10)).toBe(1);
-      expect(parseInt(el2.getAttribute('gs-y'), 10)).toBe(0);
+      expect(el1.getAttribute('gs-x')).toBe(null);
+      expect(el1.getAttribute('gs-y')).toBe(null);
+      expect(parseInt(el2.getAttribute('gs-x'))).toBe(1);
+      expect(el2.getAttribute('gs-y')).toBe(null);
       // 3rd item pushed to next row
-      expect(parseInt(el3.getAttribute('gs-x'), 10)).toBe(0);
-      expect(parseInt(el3.getAttribute('gs-y'), 10)).toBe(1);
+      expect(el3.getAttribute('gs-x')).toBe(null);
+      expect(parseInt(el3.getAttribute('gs-y'))).toBe(1);
     });
   });
 });
diff --git a/spec/test.html b/spec/test.html
index b69153ed..a50e9cf3 100644
--- a/spec/test.html
+++ b/spec/test.html
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Grid Spec test</title>
   <link rel="stylesheet" href="https://github.com/demo/demo.css"/>
-  <link rel="stylesheet" href="https://github.com/dist/gridstack-extra.css"/>
   <script src="https://github.com/dist/gridstack-all.js"></script>
 </head>
 <body>
diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss
deleted file mode 100644
index 422588fa..00000000
--- a/src/gridstack-extra.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * default to generate [2-11] columns as 1 (oneColumnMode) and 12 (default) are in the main css
- * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license
- */
-$start: 2 !default;
-$end: 11 !default;
-
-@function fixed($float) {
-  @return calc(round($float * 1000) / 1000); // total 4-5 digits being %
-}
-
-@mixin grid-stack-items($columns) {
-  .gs-#{$columns} > .grid-stack-item {
-    width: fixed(calc(100% / $columns));
-
-    @for $i from 1 through $columns - 1 {
-      &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
-      &[gs-w='#{$i+1}'] { width: fixed(calc(100% / $columns) * ($i+1)); }
-    }
-  }
-}
-
-@for $j from $start through $end {
-  @include grid-stack-items($j)
-}
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 2f5f7dbb..4ad643ee 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -3,7 +3,6 @@
  * Copyright (c) 2021-2024 Alain Dumesny - see GridStack root license
  */
 
-$columns: 12 !default;
 $animation_speed: .3s !default;
 
 @function fixed($float) {
@@ -41,6 +40,8 @@ $animation_speed: .3s !default;
 .grid-stack > .grid-stack-item {
   position: absolute;
   padding: 0;
+  top: 0; left: 0; // some default to reduce at least first row/column inline styles
+  width: var(--gs-column-width); // reduce 1x1 items inline styles
   height: var(--gs-cell-height);
 
   > .grid-stack-item-content {
@@ -155,15 +156,3 @@ $animation_speed: .3s !default;
   left: 0%;
 }
 
-.gs-#{$columns} > .grid-stack-item {
-  width: fixed(calc(100% / $columns));
-  @for $i from 1 through ($columns - 1) {
-    &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
-    &[gs-w='#{$i + 1}'] { width: fixed(calc(100% / $columns) * ($i + 1)); }
-  }
-}
-
-.gs-1 > .grid-stack-item {
-  width: 100%;
-}
-
diff --git a/src/gridstack.ts b/src/gridstack.ts
index cd34dc81..3c90a074 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -342,7 +342,7 @@ export class GridStack {
 
     // Now check if we're loading into 1 column mode FIRST so we don't do un-necessary work (like cellHeight = width / 12 then go 1 column)
     this.checkDynamicColumn();
-    this.el.classList.add('gs-' + opts.column);
+    this._updateColumnVar(opts);
 
     if (opts.rtl === 'auto') {
       opts.rtl = (el.style.direction === 'rtl');
@@ -432,6 +432,11 @@ export class GridStack {
     this._updateResizeEvent();
   }
 
+  private _updateColumnVar(opts: GridStackOptions = this.opts): void {
+    this.el.classList.add('gs-' + opts.column);
+    if (typeof opts.column === 'number') this.el.style.setProperty('--gs-column-width', `${100/opts.column}%`);
+  }
+
   /**
    * add a new widget and returns it.
    *
@@ -939,8 +944,6 @@ export class GridStack {
   /**
    * 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.
-   * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11],
-   * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns)
    * @param column - Integer > 0 (default 12).
    * @param layout specify the type of re-layout that will happen (position, size, etc...).
    * Note: items will never be outside of the current column boundaries. default ('moveScale'). Ignored for 1 column
@@ -954,7 +957,7 @@ export class GridStack {
 
     this.engine.column = column;
     this.el.classList.remove('gs-' + oldColumn);
-    this.el.classList.add('gs-' + column);
+    this._updateColumnVar();
 
     // update the items now, checking if we have a custom children layout
     /*const newChildren = this.opts.columnOpts?.breakpoints?.find(r => r.c === column)?.children;
@@ -1649,23 +1652,21 @@ export class GridStack {
     return this;
   }
 
-  /**
-   * Call to write position x,y,w,h attributes back to element
-   * In addition, updates the inline top/height inline style as well
-   * @internal
-   */
+  /** @internal write position CSS vars and x,y,w,h attributes (not used for CSS but by users) back to element */
   protected _writePosAttr(el: HTMLElement, n: GridStackNode): GridStack {
-    if (n.x !== undefined && n.x !== null) { el.setAttribute('gs-x', String(n.x)); }
-    if (n.y !== undefined && n.y !== null) { el.setAttribute('gs-y', String(n.y)); }
-    n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');
-    n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');
     // Avoid overwriting the inline style of the element during drag/resize, but always update the placeholder
     if ((!n._moving && !n._resizing) || this._placeholder === el) {
-      // Set inline style, refer CSS variables
-      el.style.top = `calc(${n.y} * var(--gs-cell-height))`;
-      // height is set to --gs-cell-height by default in the main CSS, so no need to set inline style when h = 1
-      el.style.height = n.h > 1 ? `calc(${n.h} * var(--gs-cell-height))` : undefined;
-    }
+      // width/height:1 x/y:0 is set by default in the main CSS, so no need to set inlined vars
+      el.style.top = n.y ? (n.y === 1 ? `var(--gs-cell-height)` : `calc(${n.y} * var(--gs-cell-height))`) : null;
+      el.style.left = n.x ? (n.x === 1 ? `var(--gs-column-width)` : `calc(${n.x} * var(--gs-column-width))`) : null;
+      el.style.width = n.w > 1 ? `calc(${n.w} * var(--gs-column-width))` : null;
+      el.style.height = n.h > 1 ? `calc(${n.h} * var(--gs-cell-height))` : null;
+    }
+    // NOTE: those are technically not needed anymore (v12+) as we have CSS vars for everything, but some users depends on them to render item size using CSS
+    n.x > 0 ? el.setAttribute('gs-x', String(n.x)) : el.removeAttribute('gs-x');
+    n.y > 0 ? el.setAttribute('gs-y', String(n.y)) : el.removeAttribute('gs-y');
+    n.w > 1 ? el.setAttribute('gs-w', String(n.w)) : el.removeAttribute('gs-w');
+    n.h > 1 ? el.setAttribute('gs-h', String(n.h)) : el.removeAttribute('gs-h');
     return this;
   }
 
@@ -1884,7 +1885,7 @@ export class GridStack {
     if (this.opts.marginTop === this.opts.marginBottom && this.opts.marginLeft === this.opts.marginRight && this.opts.marginTop === this.opts.marginRight) {
       this.opts.margin = this.opts.marginTop; // makes it easier to check for no-ops in setMargin()
     }
-    
+
     // finally Update the CSS margin variables (inside the cell height) */
     const style = this.el.style;
     style.setProperty('--gs-item-margin-top', `${this.opts.marginTop}${this.opts.marginUnit}`);