From 5d24e8522329c6894f97bfd95a6797914e05d956 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Sat, 8 Apr 2023 18:18:19 -0700
Subject: [PATCH] removed `gs-min|max_w|h` attribute

* fix #2243
* removed `gs-min|max_w|h` attribute  generated in CSS or written out as they are never used for rendering, only for initial load. This reduce our column/row styles in half!
---
 README.md                          |    2 -
 doc/CHANGES.md                     |    4 +
 doc/README.md                      |    2 +-
 spec/e2e/html/810-many-columns.css | 1092 ++++++++++------------------
 spec/gridstack-spec.ts             |   69 +-
 src/gridstack-engine.ts            |   13 +-
 src/gridstack-extra.scss           |    2 -
 src/gridstack.scss                 |    4 -
 src/gridstack.ts                   |   21 +-
 src/utils.ts                       |    9 +
 10 files changed, 419 insertions(+), 799 deletions(-)

diff --git a/README.md b/README.md
index f90448745..a9f72b386 100644
--- a/README.md
+++ b/README.md
@@ -257,8 +257,6 @@ Better yet, here is a SASS code snippet which can make life much easier (Thanks
   @for $i from 0 through $gridstack-columns {
     &[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
     &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
-    &[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
-    &[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
   }
 } 
 ```
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 7c9f185de..32f9785b2 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -5,6 +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/)*
 
+- [7.3.0-dev (TBD)](#730-dev-tbd)
 - [7.3.0 (2023-04-01)](#730-2023-04-01)
 - [7.2.3 (2023-02-02)](#723-2023-02-02)
 - [7.2.2 (2023-01-16)](#722-2023-01-16)
@@ -82,6 +83,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 7.3.0-dev (TBD)
+* feat [#2243](https://github.com/gridstack/gridstack.js/issues/2243) removed `gs-min|max_w|h` attribute generated in CSS or written out as they are never used for rendering, only for initial load. This reduce our column/row styles in half!
+
 ## 7.3.0 (2023-04-01)
 * feat [#2229](https://github.com/gridstack/gridstack.js/pull/2229) support nonce for CSP. Thank you [@jedwards1211](https://github.com/jedwards1211)
 * feat: support nested grids with Angular component demo. Thank you R. Blanken for supporting this.
diff --git a/doc/README.md b/doc/README.md
index 5a84d8125..869b0b53a 100644
--- a/doc/README.md
+++ b/doc/README.md
@@ -51,7 +51,7 @@ gridstack.js API
   - [`isAreaEmpty(x, y, width, height)`](#isareaemptyx-y-width-height)
   - [`load(layout: GridStackWidget[], boolean | ((w: GridStackWidget, add: boolean) => void)  = true)`](#loadlayout-gridstackwidget-boolean--w-gridstackwidget-add-boolean--void---true)
   - [`makeWidget(el)`](#makewidgetel)
-  - [`makeSubGrid(el)`](#makeSubGrid)
+  - [`makeSubgrid(el)`](#makesubgridel)
   - [`margin(value: numberOrString)`](#marginvalue-numberorstring)
   - [`movable(el, val)`](#movableel-val)
   - [`removeWidget(el, removeDOM = true, triggerEvent = true)`](#removewidgetel-removedom--true-triggerevent--true)
diff --git a/spec/e2e/html/810-many-columns.css b/spec/e2e/html/810-many-columns.css
index 024ced811..aeb7a78f1 100644
--- a/spec/e2e/html/810-many-columns.css
+++ b/spec/e2e/html/810-many-columns.css
@@ -1,740 +1,378 @@
 /* SASS code using https://www.sassmeister.com/
 .grid-stack > .grid-stack-item {
 
-    $gridstack-columns: 30;
+    $gridstack-columns: 60;
   
     min-width: (100% / $gridstack-columns);
     
     @for $i from 1 through $gridstack-columns {
       &[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
       &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
-      &[gs-min-w='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
-      &[gs-max-w='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
     }
   }
   */
 
-  /* override gridstack,css */
-  .grid-stack > .grid-stack-item {
-    min-width: 1.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="1"] {
-    width: 1.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="1"] {
-    left: 1.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="1"] {
-    min-width: 1.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="1"] {
-    max-width: 1.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="2"] {
-    width: 3.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="2"] {
-    left: 3.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="2"] {
-    min-width: 3.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="2"] {
-    max-width: 3.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="3"] {
-    width: 5%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="3"] {
-    left: 5%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="3"] {
-    min-width: 5%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="3"] {
-    max-width: 5%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="4"] {
-    width: 6.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="4"] {
-    left: 6.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="4"] {
-    min-width: 6.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="4"] {
-    max-width: 6.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="5"] {
-    width: 8.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="5"] {
-    left: 8.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="5"] {
-    min-width: 8.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="5"] {
-    max-width: 8.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="6"] {
-    width: 10%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="6"] {
-    left: 10%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="6"] {
-    min-width: 10%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="6"] {
-    max-width: 10%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="7"] {
-    width: 11.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="7"] {
-    left: 11.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="7"] {
-    min-width: 11.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="7"] {
-    max-width: 11.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="8"] {
-    width: 13.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="8"] {
-    left: 13.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="8"] {
-    min-width: 13.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="8"] {
-    max-width: 13.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="9"] {
-    width: 15%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="9"] {
-    left: 15%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="9"] {
-    min-width: 15%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="9"] {
-    max-width: 15%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="10"] {
-    width: 16.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="10"] {
-    left: 16.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="10"] {
-    min-width: 16.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="10"] {
-    max-width: 16.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="11"] {
-    width: 18.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="11"] {
-    left: 18.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="11"] {
-    min-width: 18.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="11"] {
-    max-width: 18.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="12"] {
-    width: 20%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="12"] {
-    left: 20%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="12"] {
-    min-width: 20%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="12"] {
-    max-width: 20%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="13"] {
-    width: 21.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="13"] {
-    left: 21.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="13"] {
-    min-width: 21.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="13"] {
-    max-width: 21.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="14"] {
-    width: 23.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="14"] {
-    left: 23.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="14"] {
-    min-width: 23.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="14"] {
-    max-width: 23.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="15"] {
-    width: 25%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="15"] {
-    left: 25%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="15"] {
-    min-width: 25%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="15"] {
-    max-width: 25%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="16"] {
-    width: 26.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="16"] {
-    left: 26.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="16"] {
-    min-width: 26.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="16"] {
-    max-width: 26.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="17"] {
-    width: 28.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="17"] {
-    left: 28.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="17"] {
-    min-width: 28.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="17"] {
-    max-width: 28.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="18"] {
-    width: 30%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="18"] {
-    left: 30%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="18"] {
-    min-width: 30%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="18"] {
-    max-width: 30%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="19"] {
-    width: 31.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="19"] {
-    left: 31.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="19"] {
-    min-width: 31.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="19"] {
-    max-width: 31.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="20"] {
-    width: 33.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="20"] {
-    left: 33.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="20"] {
-    min-width: 33.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="20"] {
-    max-width: 33.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="21"] {
-    width: 35%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="21"] {
-    left: 35%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="21"] {
-    min-width: 35%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="21"] {
-    max-width: 35%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="22"] {
-    width: 36.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="22"] {
-    left: 36.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="22"] {
-    min-width: 36.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="22"] {
-    max-width: 36.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="23"] {
-    width: 38.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="23"] {
-    left: 38.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="23"] {
-    min-width: 38.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="23"] {
-    max-width: 38.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="24"] {
-    width: 40%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="24"] {
-    left: 40%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="24"] {
-    min-width: 40%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="24"] {
-    max-width: 40%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="25"] {
-    width: 41.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="25"] {
-    left: 41.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="25"] {
-    min-width: 41.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="25"] {
-    max-width: 41.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="26"] {
-    width: 43.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="26"] {
-    left: 43.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="26"] {
-    min-width: 43.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="26"] {
-    max-width: 43.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="27"] {
-    width: 45%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="27"] {
-    left: 45%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="27"] {
-    min-width: 45%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="27"] {
-    max-width: 45%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="28"] {
-    width: 46.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="28"] {
-    left: 46.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="28"] {
-    min-width: 46.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="28"] {
-    max-width: 46.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="29"] {
-    width: 48.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="29"] {
-    left: 48.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="29"] {
-    min-width: 48.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="29"] {
-    max-width: 48.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="30"] {
-    width: 50%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="30"] {
-    left: 50%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="30"] {
-    min-width: 50%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="30"] {
-    max-width: 50%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="31"] {
-    width: 51.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="31"] {
-    left: 51.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="31"] {
-    min-width: 51.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="31"] {
-    max-width: 51.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="32"] {
-    width: 53.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="32"] {
-    left: 53.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="32"] {
-    min-width: 53.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="32"] {
-    max-width: 53.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="33"] {
-    width: 55%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="33"] {
-    left: 55%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="33"] {
-    min-width: 55%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="33"] {
-    max-width: 55%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="34"] {
-    width: 56.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="34"] {
-    left: 56.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="34"] {
-    min-width: 56.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="34"] {
-    max-width: 56.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="35"] {
-    width: 58.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="35"] {
-    left: 58.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="35"] {
-    min-width: 58.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="35"] {
-    max-width: 58.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="36"] {
-    width: 60%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="36"] {
-    left: 60%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="36"] {
-    min-width: 60%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="36"] {
-    max-width: 60%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="37"] {
-    width: 61.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="37"] {
-    left: 61.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="37"] {
-    min-width: 61.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="37"] {
-    max-width: 61.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="38"] {
-    width: 63.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="38"] {
-    left: 63.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="38"] {
-    min-width: 63.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="38"] {
-    max-width: 63.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="39"] {
-    width: 65%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="39"] {
-    left: 65%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="39"] {
-    min-width: 65%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="39"] {
-    max-width: 65%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="40"] {
-    width: 66.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="40"] {
-    left: 66.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="40"] {
-    min-width: 66.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="40"] {
-    max-width: 66.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="41"] {
-    width: 68.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="41"] {
-    left: 68.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="41"] {
-    min-width: 68.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="41"] {
-    max-width: 68.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="42"] {
-    width: 70%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="42"] {
-    left: 70%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="42"] {
-    min-width: 70%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="42"] {
-    max-width: 70%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="43"] {
-    width: 71.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="43"] {
-    left: 71.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="43"] {
-    min-width: 71.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="43"] {
-    max-width: 71.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="44"] {
-    width: 73.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="44"] {
-    left: 73.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="44"] {
-    min-width: 73.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="44"] {
-    max-width: 73.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="45"] {
-    width: 75%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="45"] {
-    left: 75%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="45"] {
-    min-width: 75%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="45"] {
-    max-width: 75%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="46"] {
-    width: 76.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="46"] {
-    left: 76.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="46"] {
-    min-width: 76.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="46"] {
-    max-width: 76.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="47"] {
-    width: 78.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="47"] {
-    left: 78.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="47"] {
-    min-width: 78.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="47"] {
-    max-width: 78.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="48"] {
-    width: 80%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="48"] {
-    left: 80%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="48"] {
-    min-width: 80%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="48"] {
-    max-width: 80%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="49"] {
-    width: 81.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="49"] {
-    left: 81.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="49"] {
-    min-width: 81.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="49"] {
-    max-width: 81.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="50"] {
-    width: 83.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="50"] {
-    left: 83.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="50"] {
-    min-width: 83.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="50"] {
-    max-width: 83.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="51"] {
-    width: 85%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="51"] {
-    left: 85%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="51"] {
-    min-width: 85%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="51"] {
-    max-width: 85%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="52"] {
-    width: 86.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="52"] {
-    left: 86.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="52"] {
-    min-width: 86.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="52"] {
-    max-width: 86.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="53"] {
-    width: 88.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="53"] {
-    left: 88.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="53"] {
-    min-width: 88.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="53"] {
-    max-width: 88.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="54"] {
-    width: 90%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="54"] {
-    left: 90%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="54"] {
-    min-width: 90%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="54"] {
-    max-width: 90%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="55"] {
-    width: 91.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="55"] {
-    left: 91.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="55"] {
-    min-width: 91.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="55"] {
-    max-width: 91.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="56"] {
-    width: 93.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="56"] {
-    left: 93.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="56"] {
-    min-width: 93.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="56"] {
-    max-width: 93.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="57"] {
-    width: 95%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="57"] {
-    left: 95%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="57"] {
-    min-width: 95%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="57"] {
-    max-width: 95%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="58"] {
-    width: 96.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="58"] {
-    left: 96.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="58"] {
-    min-width: 96.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="58"] {
-    max-width: 96.6666666667%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="59"] {
-    width: 98.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="59"] {
-    left: 98.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="59"] {
-    min-width: 98.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="59"] {
-    max-width: 98.3333333333%;
-  }
-  .grid-stack > .grid-stack-item[gs-w="60"] {
-    width: 100%;
-  }
-  .grid-stack > .grid-stack-item[gs-x="60"] {
-    left: 100%;
-  }
-  .grid-stack > .grid-stack-item[gs-min-w="60"] {
-    min-width: 100%;
-  }
-  .grid-stack > .grid-stack-item[gs-max-w="60"] {
-    max-width: 100%;
-  }
\ No newline at end of file
+/* override gridstack,css */
+.grid-stack > .grid-stack-item {
+  min-width: 1.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="1"] {
+  width: 1.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="1"] {
+  left: 1.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="2"] {
+  width: 3.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="2"] {
+  left: 3.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="3"] {
+  width: 5%;
+}
+.grid-stack > .grid-stack-item[gs-x="3"] {
+  left: 5%;
+}
+.grid-stack > .grid-stack-item[gs-w="4"] {
+  width: 6.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="4"] {
+  left: 6.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="5"] {
+  width: 8.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="5"] {
+  left: 8.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="6"] {
+  width: 10%;
+}
+.grid-stack > .grid-stack-item[gs-x="6"] {
+  left: 10%;
+}
+.grid-stack > .grid-stack-item[gs-w="7"] {
+  width: 11.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="7"] {
+  left: 11.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="8"] {
+  width: 13.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="8"] {
+  left: 13.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="9"] {
+  width: 15%;
+}
+.grid-stack > .grid-stack-item[gs-x="9"] {
+  left: 15%;
+}
+.grid-stack > .grid-stack-item[gs-w="10"] {
+  width: 16.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="10"] {
+  left: 16.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="11"] {
+  width: 18.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="11"] {
+  left: 18.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="12"] {
+  width: 20%;
+}
+.grid-stack > .grid-stack-item[gs-x="12"] {
+  left: 20%;
+}
+.grid-stack > .grid-stack-item[gs-w="13"] {
+  width: 21.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="13"] {
+  left: 21.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="14"] {
+  width: 23.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="14"] {
+  left: 23.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="15"] {
+  width: 25%;
+}
+.grid-stack > .grid-stack-item[gs-x="15"] {
+  left: 25%;
+}
+.grid-stack > .grid-stack-item[gs-w="16"] {
+  width: 26.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="16"] {
+  left: 26.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="17"] {
+  width: 28.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="17"] {
+  left: 28.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="18"] {
+  width: 30%;
+}
+.grid-stack > .grid-stack-item[gs-x="18"] {
+  left: 30%;
+}
+.grid-stack > .grid-stack-item[gs-w="19"] {
+  width: 31.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="19"] {
+  left: 31.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="20"] {
+  width: 33.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="20"] {
+  left: 33.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="21"] {
+  width: 35%;
+}
+.grid-stack > .grid-stack-item[gs-x="21"] {
+  left: 35%;
+}
+.grid-stack > .grid-stack-item[gs-w="22"] {
+  width: 36.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="22"] {
+  left: 36.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="23"] {
+  width: 38.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="23"] {
+  left: 38.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="24"] {
+  width: 40%;
+}
+.grid-stack > .grid-stack-item[gs-x="24"] {
+  left: 40%;
+}
+.grid-stack > .grid-stack-item[gs-w="25"] {
+  width: 41.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="25"] {
+  left: 41.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="26"] {
+  width: 43.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="26"] {
+  left: 43.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="27"] {
+  width: 45%;
+}
+.grid-stack > .grid-stack-item[gs-x="27"] {
+  left: 45%;
+}
+.grid-stack > .grid-stack-item[gs-w="28"] {
+  width: 46.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="28"] {
+  left: 46.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="29"] {
+  width: 48.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="29"] {
+  left: 48.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="30"] {
+  width: 50%;
+}
+.grid-stack > .grid-stack-item[gs-x="30"] {
+  left: 50%;
+}
+.grid-stack > .grid-stack-item[gs-w="31"] {
+  width: 51.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="31"] {
+  left: 51.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="32"] {
+  width: 53.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="32"] {
+  left: 53.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="33"] {
+  width: 55%;
+}
+.grid-stack > .grid-stack-item[gs-x="33"] {
+  left: 55%;
+}
+.grid-stack > .grid-stack-item[gs-w="34"] {
+  width: 56.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="34"] {
+  left: 56.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="35"] {
+  width: 58.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="35"] {
+  left: 58.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="36"] {
+  width: 60%;
+}
+.grid-stack > .grid-stack-item[gs-x="36"] {
+  left: 60%;
+}
+.grid-stack > .grid-stack-item[gs-w="37"] {
+  width: 61.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="37"] {
+  left: 61.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="38"] {
+  width: 63.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="38"] {
+  left: 63.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="39"] {
+  width: 65%;
+}
+.grid-stack > .grid-stack-item[gs-x="39"] {
+  left: 65%;
+}
+.grid-stack > .grid-stack-item[gs-w="40"] {
+  width: 66.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="40"] {
+  left: 66.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="41"] {
+  width: 68.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="41"] {
+  left: 68.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="42"] {
+  width: 70%;
+}
+.grid-stack > .grid-stack-item[gs-x="42"] {
+  left: 70%;
+}
+.grid-stack > .grid-stack-item[gs-w="43"] {
+  width: 71.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="43"] {
+  left: 71.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="44"] {
+  width: 73.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="44"] {
+  left: 73.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="45"] {
+  width: 75%;
+}
+.grid-stack > .grid-stack-item[gs-x="45"] {
+  left: 75%;
+}
+.grid-stack > .grid-stack-item[gs-w="46"] {
+  width: 76.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="46"] {
+  left: 76.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="47"] {
+  width: 78.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="47"] {
+  left: 78.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="48"] {
+  width: 80%;
+}
+.grid-stack > .grid-stack-item[gs-x="48"] {
+  left: 80%;
+}
+.grid-stack > .grid-stack-item[gs-w="49"] {
+  width: 81.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="49"] {
+  left: 81.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="50"] {
+  width: 83.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="50"] {
+  left: 83.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="51"] {
+  width: 85%;
+}
+.grid-stack > .grid-stack-item[gs-x="51"] {
+  left: 85%;
+}
+.grid-stack > .grid-stack-item[gs-w="52"] {
+  width: 86.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="52"] {
+  left: 86.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="53"] {
+  width: 88.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="53"] {
+  left: 88.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="54"] {
+  width: 90%;
+}
+.grid-stack > .grid-stack-item[gs-x="54"] {
+  left: 90%;
+}
+.grid-stack > .grid-stack-item[gs-w="55"] {
+  width: 91.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="55"] {
+  left: 91.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="56"] {
+  width: 93.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="56"] {
+  left: 93.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="57"] {
+  width: 95%;
+}
+.grid-stack > .grid-stack-item[gs-x="57"] {
+  left: 95%;
+}
+.grid-stack > .grid-stack-item[gs-w="58"] {
+  width: 96.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-x="58"] {
+  left: 96.6666666667%;
+}
+.grid-stack > .grid-stack-item[gs-w="59"] {
+  width: 98.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-x="59"] {
+  left: 98.3333333333%;
+}
+.grid-stack > .grid-stack-item[gs-w="60"] {
+  width: 100%;
+}
+.grid-stack > .grid-stack-item[gs-x="60"] {
+  left: 100%;
+}
\ No newline at end of file
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
index 911606d0e..167167c9f 100644
--- a/spec/gridstack-spec.ts
+++ b/spec/gridstack-spec.ts
@@ -1,4 +1,4 @@
-import { GridStack, GridStackNode, GridStackWidget } from '../src/gridstack';
+import { GridItemHTMLElement, GridStack, GridStackNode, GridStackWidget } from '../src/gridstack';
 import { Utils } from '../src/utils';
 import '../dist/gridstack.css';
 
@@ -641,19 +641,27 @@ describe('gridstack', function() {
     });
     it('should set gs-min-w to 2.', function() {
       let grid = GridStack.init();
-      let items = Utils.getElements('.grid-stack-item');
+      let items: GridItemHTMLElement[] = Utils.getElements('.grid-stack-item');
       for (let i = 0; i < items.length; i++) {
         grid.update(items[i], {minW: 2, maxW: 3, minH: 4, maxH: 5});
       }
       for (let j = 0; j < items.length; j++) {
-        expect(parseInt(items[j].getAttribute('gs-min-w'), 10)).toBe(2);
-        expect(parseInt(items[j].getAttribute('gs-max-w'), 10)).toBe(3);
-        expect(parseInt(items[j].getAttribute('gs-min-h'), 10)).toBe(4);
-        expect(parseInt(items[j].getAttribute('gs-max-h'), 10)).toBe(5);
+        expect(items[j].gridstackNode.minW).toBe(2);
+        expect(items[j].gridstackNode.maxW).toBe(3);
+        expect(items[j].gridstackNode.minH).toBe(4);
+        expect(items[j].gridstackNode.maxH).toBe(5);
+        expect(items[j].getAttribute('gs-min-w')).toBe(null);
+        expect(items[j].getAttribute('gs-max-w')).toBe(null);
+        expect(items[j].getAttribute('gs-min-h')).toBe(null);
+        expect(items[j].getAttribute('gs-max-h')).toBe(null);
       }
       // remove all constrain
       grid.update('grid-stack-item', {minW: 0, maxW: null, minH: undefined, maxH: 0});
       for (let j = 0; j < items.length; j++) {
+        expect(items[j].gridstackNode.minW).toBe(undefined);
+        expect(items[j].gridstackNode.maxW).toBe(undefined);
+        expect(items[j].gridstackNode.minH).toBe(undefined);
+        expect(items[j].gridstackNode.maxH).toBe(undefined);
         expect(items[j].getAttribute('gs-min-w')).toBe(null);
         expect(items[j].getAttribute('gs-max-w')).toBe(null);
         expect(items[j].getAttribute('gs-min-h')).toBe(null);
@@ -662,7 +670,6 @@ describe('gridstack', function() {
     });
   });
 
-
   describe('grid.isAreaEmpty', function() {
     beforeEach(function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
@@ -802,10 +809,6 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(2);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(3);
       expect(widget.getAttribute('gs-auto-position')).toBe(null);
-      expect(parseInt(widget.getAttribute('gs-min-w'), 10)).toBe(1);
-      expect(parseInt(widget.getAttribute('gs-max-w'), 10)).toBe(4);
-      expect(parseInt(widget.getAttribute('gs-min-h'), 10)).toBe(2);
-      expect(parseInt(widget.getAttribute('gs-max-h'), 10)).toBe(5);
       expect(widget.getAttribute('gs-id')).toBe('coolWidget');
 
       // should move widget to top with float=false
@@ -817,10 +820,6 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(2);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(3);
       expect(widget.getAttribute('gs-auto-position')).toBe(null);
-      expect(parseInt(widget.getAttribute('gs-min-w'), 10)).toBe(1);
-      expect(parseInt(widget.getAttribute('gs-max-w'), 10)).toBe(4);
-      expect(parseInt(widget.getAttribute('gs-min-h'), 10)).toBe(2);
-      expect(parseInt(widget.getAttribute('gs-max-h'), 10)).toBe(5);
       expect(widget.getAttribute('gs-id')).toBe('coolWidget');
 
       // should not move again (no-op)
@@ -831,10 +830,6 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(2);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(3);
       expect(widget.getAttribute('gs-auto-position')).toBe(null);
-      expect(parseInt(widget.getAttribute('gs-min-w'), 10)).toBe(1);
-      expect(parseInt(widget.getAttribute('gs-max-w'), 10)).toBe(4);
-      expect(parseInt(widget.getAttribute('gs-min-h'), 10)).toBe(2);
-      expect(parseInt(widget.getAttribute('gs-max-h'), 10)).toBe(5);
       expect(widget.getAttribute('gs-id')).toBe('coolWidget');
     });
   });
@@ -871,10 +866,6 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(2);
       // expect(widget.getAttribute('gs-auto-position')).toBe('true');
-      expect(widget.getAttribute('gs-min-w')).toBe(null);
-      expect(widget.getAttribute('gs-max-w')).toBe(null);
-      expect(widget.getAttribute('gs-min-h')).toBe(null);
-      expect(widget.getAttribute('gs-max-h')).toBe(null);
       expect(widget.getAttribute('gs-id')).toBe('optionWidget');
     });
     it('should autoPosition (missing X)', function() {
@@ -886,10 +877,6 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(2);
       // expect(widget.getAttribute('gs-auto-position')).toBe('true');
-      expect(widget.getAttribute('gs-min-w')).toBe(null);
-      expect(widget.getAttribute('gs-max-w')).toBe(null);
-      expect(widget.getAttribute('gs-min-h')).toBe(null);
-      expect(widget.getAttribute('gs-max-h')).toBe(null);
       expect(widget.getAttribute('gs-id')).toBe('optionWidget');
     });
     it('should autoPosition (missing Y)', function() {
@@ -901,10 +888,6 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(2);
       // expect(widget.getAttribute('gs-auto-position')).toBe('true');
-      expect(widget.getAttribute('gs-min-w')).toBe(null);
-      expect(widget.getAttribute('gs-max-w')).toBe(null);
-      expect(widget.getAttribute('gs-min-h')).toBe(null);
-      expect(widget.getAttribute('gs-max-h')).toBe(null);
       expect(widget.getAttribute('gs-id')).toBe('optionWidget');
     });
     it('should autoPosition (correct X, missing Y)', function() {
@@ -916,10 +899,6 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(2);
       // expect(widget.getAttribute('gs-auto-position')).toBe('true');
-      expect(widget.getAttribute('gs-min-w')).toBe(null);
-      expect(widget.getAttribute('gs-max-w')).toBe(null);
-      expect(widget.getAttribute('gs-min-h')).toBe(null);
-      expect(widget.getAttribute('gs-max-h')).toBe(null);
       expect(widget.getAttribute('gs-id')).toBe('optionWidget');
     });
     it('should autoPosition (empty options)', function() {
@@ -931,10 +910,6 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(1);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(1);
       // expect(widget.getAttribute('gs-auto-position')).toBe('true');
-      expect(widget.getAttribute('gs-min-w')).toBe(null);
-      expect(widget.getAttribute('gs-max-w')).toBe(null);
-      expect(widget.getAttribute('gs-min-h')).toBe(null);
-      expect(widget.getAttribute('gs-max-h')).toBe(null);
     });
 
   });
@@ -970,7 +945,7 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('gs-x'), 10)).toBe(1);
       expect(parseInt(widget.getAttribute('gs-y'), 10)).toBe(5);
       expect(parseInt(widget.getAttribute('gs-w'), 10)).toBe(3);
-      expect(parseInt(widget.getAttribute('gs-max-w'), 10)).toBe(4);
+      expect(widget.gridstackNode.maxW).toBe(4);
       expect(parseInt(widget.getAttribute('gs-h'), 10)).toBe(1);
       expect(widget.getAttribute('gs-id')).toBe('foo');
     });
@@ -1199,7 +1174,7 @@ describe('gridstack', function() {
     it('should change max and constrain a wanted resize', function() {
       let grid = GridStack.init({float: true});
       let items = Utils.getElements('.grid-stack-item');
-      let el = items[1];
+      let el: GridItemHTMLElement = items[1];
       expect(el.getAttribute('gs-max-w')).toBe(null);
 
       grid.update(el, {maxW: 2, w: 5});
@@ -1207,19 +1182,19 @@ describe('gridstack', function() {
       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-max-w'), 10)).toBe(2);
+      expect(el.gridstackNode.maxW).toBe(2);
     });
     it('should change max and constrain existing', function() {
       let grid = GridStack.init({float: true});
       let items = Utils.getElements('.grid-stack-item');
-      let el = items[1];
+      let el: GridItemHTMLElement = items[1];
       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-h'), 10)).toBe(4);
-      expect(parseInt(el.getAttribute('gs-max-w'), 10)).toBe(2);
+      expect(el.gridstackNode.maxW).toBe(2);
       expect(parseInt(el.getAttribute('gs-w'), 10)).toBe(2);
     });
     it('should change all max and move', function() {
@@ -1234,12 +1209,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);
-      items.forEach(item => {
+      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(parseInt(item.getAttribute('gs-max-w'), 10)).toBe(2);
-        expect(parseInt(item.getAttribute('gs-max-h'), 10)).toBe(2);
+        expect(item.gridstackNode.maxW).toBe(2);
+        expect(item.gridstackNode.maxH).toBe(2);
       });
     });
 
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
index 632d9b64a..9de53753d 100644
--- a/src/gridstack-engine.ts
+++ b/src/gridstack-engine.ts
@@ -348,15 +348,16 @@ export class GridStackEngine {
     if (!node.autoPosition) { delete node.autoPosition; }
     if (!node.noResize) { delete node.noResize; }
     if (!node.noMove) { delete node.noMove; }
+    Utils.sanitizeMinMax(node);
 
     // check for NaN (in case messed up strings were passed. can't do parseInt() || defaults.x above as 0 is valid #)
-    if (typeof node.x == 'string')      { node.x = Number(node.x); }
-    if (typeof node.y == 'string')      { node.y = Number(node.y); }
-    if (typeof node.w == 'string')  { node.w = Number(node.w); }
+    if (typeof node.x == 'string') { node.x = Number(node.x); }
+    if (typeof node.y == 'string') { node.y = Number(node.y); }
+    if (typeof node.w == 'string') { node.w = Number(node.w); }
     if (typeof node.h == 'string') { node.h = Number(node.h); }
-    if (isNaN(node.x))      { node.x = defaults.x; node.autoPosition = true; }
-    if (isNaN(node.y))      { node.y = defaults.y; node.autoPosition = true; }
-    if (isNaN(node.w))  { node.w = defaults.w; }
+    if (isNaN(node.x)) { node.x = defaults.x; node.autoPosition = true; }
+    if (isNaN(node.y)) { node.y = defaults.y; node.autoPosition = true; }
+    if (isNaN(node.w)) { node.w = defaults.w; }
     if (isNaN(node.h)) { node.h = defaults.h; }
 
     return this.nodeBoundFix(node, resizing);
diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss
index cc9620d4d..d663d2055 100644
--- a/src/gridstack-extra.scss
+++ b/src/gridstack-extra.scss
@@ -17,8 +17,6 @@ $gridstack-columns: 11 !default;
       @for $i from 1 through $columns {
         &[gs-w='#{$i}'] { width: math.div(100%, $columns) * $i; }
         &[gs-x='#{$i}'] { left: math.div(100%, $columns) * $i; }
-        &[gs-min-w='#{$i}'] { min-width: math.div(100%, $columns) * $i; }
-        &[gs-max-w='#{$i}'] { max-width: math.div(100%, $columns) * $i; }
       }
     }
   }
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 1ea1f81d5..74f238342 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -91,8 +91,6 @@ $animation_speed: .3s !default;
     @for $i from 0 through $gridstack-columns {
       &[gs-w='#{$i}'] { width: math.div(100%, $gridstack-columns) * $i; }
       &[gs-x='#{$i}'] { left: math.div(100%, $gridstack-columns) * $i; }
-      &[gs-min-w='#{$i}'] { min-width: math.div(100%, $gridstack-columns) * $i; }
-      &[gs-max-w='#{$i}'] { max-width: math.div(100%, $gridstack-columns) * $i; }
     }
   }
 
@@ -100,8 +98,6 @@ $animation_speed: .3s !default;
     min-width: 100%;
     &[gs-w='1'] { width: 100%; }
     &[gs-x='1'] { left: 100%; }
-    &[gs-min-w='1'] { min-width: 100%; }
-    &[gs-max-w='1'] { max-width: 100%; }
   }
 
   &.grid-stack-animate,
diff --git a/src/gridstack.ts b/src/gridstack.ts
index b0535d761..e5f6350be 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -1180,6 +1180,7 @@ export class GridStack {
           ddChanged = ddChanged || (!this.opts.staticGrid && (key === 'noResize' || key === 'noMove' || key === 'locked'));
         }
       }
+      Utils.sanitizeMinMax(n);
 
       // finally move the widget
       if (m) {
@@ -1361,8 +1362,6 @@ export class GridStack {
         let h: string = getHeight(i);
         Utils.addCSSRule(this._styles, `${prefix}[gs-y="${i-1}"]`,   `top: ${getHeight(i-1)}`); // start at 0
         Utils.addCSSRule(this._styles, `${prefix}[gs-h="${i}"]`,     `height: ${h}`);
-        Utils.addCSSRule(this._styles, `${prefix}[gs-min-h="${i}"]`, `min-height: ${h}`);
-        Utils.addCSSRule(this._styles, `${prefix}[gs-max-h="${i}"]`, `max-height: ${h}`);
       }
       this._styles._max = maxH;
     }
@@ -1428,10 +1427,6 @@ export class GridStack {
 
     let attrs /*: GridStackWidget but strings */ = { // remaining attributes
       autoPosition: 'gs-auto-position',
-      minW: 'gs-min-w',
-      minH: 'gs-min-h',
-      maxW: 'gs-max-w',
-      maxH: 'gs-max-h',
       noResize: 'gs-no-resize',
       noMove: 'gs-no-move',
       locked: 'gs-locked',
@@ -1454,16 +1449,22 @@ export class GridStack {
     node.y = Utils.toNumber(el.getAttribute('gs-y'));
     node.w = Utils.toNumber(el.getAttribute('gs-w'));
     node.h = Utils.toNumber(el.getAttribute('gs-h'));
-    node.maxW = Utils.toNumber(el.getAttribute('gs-max-w'));
-    node.minW = Utils.toNumber(el.getAttribute('gs-min-w'));
-    node.maxH = Utils.toNumber(el.getAttribute('gs-max-h'));
-    node.minH = Utils.toNumber(el.getAttribute('gs-min-h'));
     node.autoPosition = Utils.toBool(el.getAttribute('gs-auto-position'));
     node.noResize = Utils.toBool(el.getAttribute('gs-no-resize'));
     node.noMove = Utils.toBool(el.getAttribute('gs-no-move'));
     node.locked = Utils.toBool(el.getAttribute('gs-locked'));
     node.id = el.getAttribute('gs-id');
 
+    // read but never written out
+    node.maxW = Utils.toNumber(el.getAttribute('gs-max-w'));
+    if (node.maxW) el.removeAttribute('gs-max-w');
+    node.minW = Utils.toNumber(el.getAttribute('gs-min-w'));
+    if (node.minW) el.removeAttribute('gs-min-w');
+    node.maxH = Utils.toNumber(el.getAttribute('gs-max-h'));
+    if (node.maxH) el.removeAttribute('gs-max-h');
+    node.minH = Utils.toNumber(el.getAttribute('gs-min-h'));
+    if (node.minH) el.removeAttribute('gs-min-h');
+
     // remove any key not found (null or false which is default)
     for (const key in node) {
       if (!node.hasOwnProperty(key)) return;
diff --git a/src/utils.ts b/src/utils.ts
index acc72033b..7c81b8d49 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -258,6 +258,15 @@ export class Utils {
     return a && b && a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
   }
 
+  /** given a node, makes sure it's min/max are valid */
+  static sanitizeMinMax(node: GridStackNode) {
+    // remove 0, undefine, null
+    if (!node.minW) { delete node.minW; }
+    if (!node.minH) { delete node.minH; }
+    if (!node.maxW) { delete node.maxW; }
+    if (!node.maxH) { delete node.maxH; }
+  }
+
   /** removes field from the first object if same as the second objects (like diffing) and internal '_' for saving */
   static removeInternalAndSame(a: unknown, b: unknown):void {
     if (typeof a !== 'object' || typeof b !== 'object') return;