From 9178fe57d2ff03cd4c96a7316ba1d9248f154bc8 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Sat, 13 May 2023 08:54:10 -0700
Subject: [PATCH] fix gs-h|x="1"

* fix #2314
* issue with having min-height/width instead of height/width for gs-h|x="1"
* further compressed CSS multi column rules (use `.gs-# > .grid-stack-item` instead of `.grid-stack-# > .grid-stack-item`)
---
 README.md                          |  20 +--
 doc/CHANGES.md                     |   5 +
 karma.conf.js                      |   2 +-
 spec/e2e/html/810-many-columns.css | 244 ++++++++++++++---------------
 spec/gridstack-spec.ts             |   8 +-
 src/gridstack-extra.scss           |   4 +-
 src/gridstack.scss                 |  15 +-
 src/gridstack.ts                   |  15 +-
 8 files changed, 157 insertions(+), 156 deletions(-)

diff --git a/README.md b/README.md
index b4be0522a..02665a826 100644
--- a/README.md
+++ b/README.md
@@ -222,14 +222,14 @@ If you need > 12 columns or want to generate the CSS manually you will need to g
 For instance for 4-column grid you need to write CSS to be:
 
 ```css
-.grid-stack-4 > .grid-stack-item { min-width: 25% }
-.grid-stack-4 > .grid-stack-item[gs-w="4"]  { width: 100% }
-.grid-stack-4 > .grid-stack-item[gs-w="3"]  { width: 75% }
-.grid-stack-4 > .grid-stack-item[gs-w="2"]  { width: 50% }
-
-.grid-stack-4 > .grid-stack-item[gs-x="3"]  { left: 75% }
-.grid-stack-4 > .grid-stack-item[gs-x="2"]  { left: 50% }
-.grid-stack-4 > .grid-stack-item[gs-x="1"]  { left: 25% }
+.gs-4 > .grid-stack-item[gs-x="1"]  { left: 25% }
+.gs-4 > .grid-stack-item[gs-x="2"]  { left: 50% }
+.gs-4 > .grid-stack-item[gs-x="3"]  { left: 75% }
+
+.gs-4 > .grid-stack-item { width: 25% }
+.gs-4 > .grid-stack-item[gs-w="2"]  { width: 50% }
+.gs-4 > .grid-stack-item[gs-w="3"]  { width: 75% }
+.gs-4 > .grid-stack-item[gs-w="4"]  { width: 100% }
 ```
 
 Better yet, here is a SASS code snippet, you can use sites like [sassmeister.com](https://www.sassmeister.com/) to generate the CSS for you instead:
@@ -239,9 +239,9 @@ $columns: 20;
 @function fixed($float) {
   @return calc(round($float * 100) / 100); // total 4 digits being %
 }
-.grid-stack-#{$columns} > .grid-stack-item {
+.gs-#{$columns} > .grid-stack-item {
 
-  min-width: fixed(calc(100% / $columns));
+  width: fixed(calc(100% / $columns));
 
   @for $i from 1 through $columns - 1 {
     &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index d8e295a3d..54295c4af 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/)*
 
+- [8.1.1 (2023-05-13)](#811-2023-05-13)
 - [8.1.0 (2023-05-06)](#810-2023-05-06)
 - [8.0.1 (2023-04-29)](#801-2023-04-29)
 - [8.0.0 (2023-04-29)](#800-2023-04-29)
@@ -85,6 +86,10 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 8.1.1 (2023-05-13)
+* fix: [#2314](https://github.com/gridstack/gridstack.js/issues/2314) fix issue with having min-height/width instead of height/width for gs-h|x="1"
+also further compressed CSS multi column rules (use `.gs-# > .grid-stack-item` instead of `.grid-stack-# > .grid-stack-item`)
+
 ## 8.1.0 (2023-05-06)
 * break: remove `GridStackOptions.minWidth` obsolete since 5.1, use `oneColumnSize` instead
 * optimize: CSS files now even 25% smaller (after being halfed in 8.0.0) by removing `.grid-stack` prefix for anything already gs based, and 3 digit rounding.
diff --git a/karma.conf.js b/karma.conf.js
index 04a7ce5a6..2dd23ade0 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -14,7 +14,7 @@ module.exports = function(config) {
       //     }
       //   }
       // },
-      exclude: ["demo"] // ignore dummy demo .ts files
+      exclude: ["demo", "dist/ng"] // ignore dummy demo .ts files
     },
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
diff --git a/spec/e2e/html/810-many-columns.css b/spec/e2e/html/810-many-columns.css
index 82879c547..8f3bacbad 100644
--- a/spec/e2e/html/810-many-columns.css
+++ b/spec/e2e/html/810-many-columns.css
@@ -3,9 +3,9 @@ $columns: 60;
 @function fixed($float) {
   @return calc(round($float * 1000) / 1000); // total 4-5 digits being %
 }
-.grid-stack-#{$columns} > .grid-stack-item {
+.gs-#{$columns} > .grid-stack-item {
 
-  min-width: fixed(calc(100% / $columns));
+  width: fixed(calc(100% / $columns));
 
   @for $i from 1 through $columns - 1 {
     &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); }
@@ -13,360 +13,360 @@ $columns: 60;
   }
 }
 */
-.grid-stack-60 > .grid-stack-item {
-  min-width: 1.667%;
+.gs-60 > .grid-stack-item {
+  width: 1.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="1"] {
+.gs-60 > .grid-stack-item[gs-x="1"] {
   left: 1.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="2"] {
+.gs-60 > .grid-stack-item[gs-w="2"] {
   width: 3.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="2"] {
+.gs-60 > .grid-stack-item[gs-x="2"] {
   left: 3.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="3"] {
+.gs-60 > .grid-stack-item[gs-w="3"] {
   width: 5%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="3"] {
+.gs-60 > .grid-stack-item[gs-x="3"] {
   left: 5%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="4"] {
+.gs-60 > .grid-stack-item[gs-w="4"] {
   width: 6.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="4"] {
+.gs-60 > .grid-stack-item[gs-x="4"] {
   left: 6.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="5"] {
+.gs-60 > .grid-stack-item[gs-w="5"] {
   width: 8.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="5"] {
+.gs-60 > .grid-stack-item[gs-x="5"] {
   left: 8.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="6"] {
+.gs-60 > .grid-stack-item[gs-w="6"] {
   width: 10%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="6"] {
+.gs-60 > .grid-stack-item[gs-x="6"] {
   left: 10%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="7"] {
+.gs-60 > .grid-stack-item[gs-w="7"] {
   width: 11.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="7"] {
+.gs-60 > .grid-stack-item[gs-x="7"] {
   left: 11.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="8"] {
+.gs-60 > .grid-stack-item[gs-w="8"] {
   width: 13.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="8"] {
+.gs-60 > .grid-stack-item[gs-x="8"] {
   left: 13.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="9"] {
+.gs-60 > .grid-stack-item[gs-w="9"] {
   width: 15%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="9"] {
+.gs-60 > .grid-stack-item[gs-x="9"] {
   left: 15%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="10"] {
+.gs-60 > .grid-stack-item[gs-w="10"] {
   width: 16.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="10"] {
+.gs-60 > .grid-stack-item[gs-x="10"] {
   left: 16.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="11"] {
+.gs-60 > .grid-stack-item[gs-w="11"] {
   width: 18.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="11"] {
+.gs-60 > .grid-stack-item[gs-x="11"] {
   left: 18.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="12"] {
+.gs-60 > .grid-stack-item[gs-w="12"] {
   width: 20%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="12"] {
+.gs-60 > .grid-stack-item[gs-x="12"] {
   left: 20%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="13"] {
+.gs-60 > .grid-stack-item[gs-w="13"] {
   width: 21.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="13"] {
+.gs-60 > .grid-stack-item[gs-x="13"] {
   left: 21.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="14"] {
+.gs-60 > .grid-stack-item[gs-w="14"] {
   width: 23.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="14"] {
+.gs-60 > .grid-stack-item[gs-x="14"] {
   left: 23.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="15"] {
+.gs-60 > .grid-stack-item[gs-w="15"] {
   width: 25%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="15"] {
+.gs-60 > .grid-stack-item[gs-x="15"] {
   left: 25%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="16"] {
+.gs-60 > .grid-stack-item[gs-w="16"] {
   width: 26.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="16"] {
+.gs-60 > .grid-stack-item[gs-x="16"] {
   left: 26.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="17"] {
+.gs-60 > .grid-stack-item[gs-w="17"] {
   width: 28.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="17"] {
+.gs-60 > .grid-stack-item[gs-x="17"] {
   left: 28.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="18"] {
+.gs-60 > .grid-stack-item[gs-w="18"] {
   width: 30%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="18"] {
+.gs-60 > .grid-stack-item[gs-x="18"] {
   left: 30%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="19"] {
+.gs-60 > .grid-stack-item[gs-w="19"] {
   width: 31.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="19"] {
+.gs-60 > .grid-stack-item[gs-x="19"] {
   left: 31.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="20"] {
+.gs-60 > .grid-stack-item[gs-w="20"] {
   width: 33.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="20"] {
+.gs-60 > .grid-stack-item[gs-x="20"] {
   left: 33.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="21"] {
+.gs-60 > .grid-stack-item[gs-w="21"] {
   width: 35%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="21"] {
+.gs-60 > .grid-stack-item[gs-x="21"] {
   left: 35%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="22"] {
+.gs-60 > .grid-stack-item[gs-w="22"] {
   width: 36.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="22"] {
+.gs-60 > .grid-stack-item[gs-x="22"] {
   left: 36.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="23"] {
+.gs-60 > .grid-stack-item[gs-w="23"] {
   width: 38.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="23"] {
+.gs-60 > .grid-stack-item[gs-x="23"] {
   left: 38.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="24"] {
+.gs-60 > .grid-stack-item[gs-w="24"] {
   width: 40%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="24"] {
+.gs-60 > .grid-stack-item[gs-x="24"] {
   left: 40%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="25"] {
+.gs-60 > .grid-stack-item[gs-w="25"] {
   width: 41.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="25"] {
+.gs-60 > .grid-stack-item[gs-x="25"] {
   left: 41.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="26"] {
+.gs-60 > .grid-stack-item[gs-w="26"] {
   width: 43.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="26"] {
+.gs-60 > .grid-stack-item[gs-x="26"] {
   left: 43.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="27"] {
+.gs-60 > .grid-stack-item[gs-w="27"] {
   width: 45%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="27"] {
+.gs-60 > .grid-stack-item[gs-x="27"] {
   left: 45%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="28"] {
+.gs-60 > .grid-stack-item[gs-w="28"] {
   width: 46.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="28"] {
+.gs-60 > .grid-stack-item[gs-x="28"] {
   left: 46.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="29"] {
+.gs-60 > .grid-stack-item[gs-w="29"] {
   width: 48.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="29"] {
+.gs-60 > .grid-stack-item[gs-x="29"] {
   left: 48.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="30"] {
+.gs-60 > .grid-stack-item[gs-w="30"] {
   width: 50%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="30"] {
+.gs-60 > .grid-stack-item[gs-x="30"] {
   left: 50%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="31"] {
+.gs-60 > .grid-stack-item[gs-w="31"] {
   width: 51.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="31"] {
+.gs-60 > .grid-stack-item[gs-x="31"] {
   left: 51.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="32"] {
+.gs-60 > .grid-stack-item[gs-w="32"] {
   width: 53.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="32"] {
+.gs-60 > .grid-stack-item[gs-x="32"] {
   left: 53.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="33"] {
+.gs-60 > .grid-stack-item[gs-w="33"] {
   width: 55%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="33"] {
+.gs-60 > .grid-stack-item[gs-x="33"] {
   left: 55%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="34"] {
+.gs-60 > .grid-stack-item[gs-w="34"] {
   width: 56.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="34"] {
+.gs-60 > .grid-stack-item[gs-x="34"] {
   left: 56.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="35"] {
+.gs-60 > .grid-stack-item[gs-w="35"] {
   width: 58.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="35"] {
+.gs-60 > .grid-stack-item[gs-x="35"] {
   left: 58.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="36"] {
+.gs-60 > .grid-stack-item[gs-w="36"] {
   width: 60%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="36"] {
+.gs-60 > .grid-stack-item[gs-x="36"] {
   left: 60%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="37"] {
+.gs-60 > .grid-stack-item[gs-w="37"] {
   width: 61.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="37"] {
+.gs-60 > .grid-stack-item[gs-x="37"] {
   left: 61.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="38"] {
+.gs-60 > .grid-stack-item[gs-w="38"] {
   width: 63.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="38"] {
+.gs-60 > .grid-stack-item[gs-x="38"] {
   left: 63.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="39"] {
+.gs-60 > .grid-stack-item[gs-w="39"] {
   width: 65%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="39"] {
+.gs-60 > .grid-stack-item[gs-x="39"] {
   left: 65%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="40"] {
+.gs-60 > .grid-stack-item[gs-w="40"] {
   width: 66.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="40"] {
+.gs-60 > .grid-stack-item[gs-x="40"] {
   left: 66.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="41"] {
+.gs-60 > .grid-stack-item[gs-w="41"] {
   width: 68.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="41"] {
+.gs-60 > .grid-stack-item[gs-x="41"] {
   left: 68.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="42"] {
+.gs-60 > .grid-stack-item[gs-w="42"] {
   width: 70%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="42"] {
+.gs-60 > .grid-stack-item[gs-x="42"] {
   left: 70%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="43"] {
+.gs-60 > .grid-stack-item[gs-w="43"] {
   width: 71.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="43"] {
+.gs-60 > .grid-stack-item[gs-x="43"] {
   left: 71.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="44"] {
+.gs-60 > .grid-stack-item[gs-w="44"] {
   width: 73.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="44"] {
+.gs-60 > .grid-stack-item[gs-x="44"] {
   left: 73.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="45"] {
+.gs-60 > .grid-stack-item[gs-w="45"] {
   width: 75%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="45"] {
+.gs-60 > .grid-stack-item[gs-x="45"] {
   left: 75%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="46"] {
+.gs-60 > .grid-stack-item[gs-w="46"] {
   width: 76.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="46"] {
+.gs-60 > .grid-stack-item[gs-x="46"] {
   left: 76.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="47"] {
+.gs-60 > .grid-stack-item[gs-w="47"] {
   width: 78.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="47"] {
+.gs-60 > .grid-stack-item[gs-x="47"] {
   left: 78.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="48"] {
+.gs-60 > .grid-stack-item[gs-w="48"] {
   width: 80%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="48"] {
+.gs-60 > .grid-stack-item[gs-x="48"] {
   left: 80%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="49"] {
+.gs-60 > .grid-stack-item[gs-w="49"] {
   width: 81.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="49"] {
+.gs-60 > .grid-stack-item[gs-x="49"] {
   left: 81.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="50"] {
+.gs-60 > .grid-stack-item[gs-w="50"] {
   width: 83.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="50"] {
+.gs-60 > .grid-stack-item[gs-x="50"] {
   left: 83.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="51"] {
+.gs-60 > .grid-stack-item[gs-w="51"] {
   width: 85%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="51"] {
+.gs-60 > .grid-stack-item[gs-x="51"] {
   left: 85%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="52"] {
+.gs-60 > .grid-stack-item[gs-w="52"] {
   width: 86.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="52"] {
+.gs-60 > .grid-stack-item[gs-x="52"] {
   left: 86.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="53"] {
+.gs-60 > .grid-stack-item[gs-w="53"] {
   width: 88.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="53"] {
+.gs-60 > .grid-stack-item[gs-x="53"] {
   left: 88.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="54"] {
+.gs-60 > .grid-stack-item[gs-w="54"] {
   width: 90%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="54"] {
+.gs-60 > .grid-stack-item[gs-x="54"] {
   left: 90%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="55"] {
+.gs-60 > .grid-stack-item[gs-w="55"] {
   width: 91.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="55"] {
+.gs-60 > .grid-stack-item[gs-x="55"] {
   left: 91.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="56"] {
+.gs-60 > .grid-stack-item[gs-w="56"] {
   width: 93.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="56"] {
+.gs-60 > .grid-stack-item[gs-x="56"] {
   left: 93.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="57"] {
+.gs-60 > .grid-stack-item[gs-w="57"] {
   width: 95%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="57"] {
+.gs-60 > .grid-stack-item[gs-x="57"] {
   left: 95%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="58"] {
+.gs-60 > .grid-stack-item[gs-w="58"] {
   width: 96.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="58"] {
+.gs-60 > .grid-stack-item[gs-x="58"] {
   left: 96.667%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="59"] {
+.gs-60 > .grid-stack-item[gs-w="59"] {
   width: 98.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-x="59"] {
+.gs-60 > .grid-stack-item[gs-x="59"] {
   left: 98.333%;
 }
-.grid-stack-60 > .grid-stack-item[gs-w="60"] {
+.gs-60 > .grid-stack-item[gs-w="60"] {
   width: 100%;
 }
\ No newline at end of file
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
index f53663914..beb432d88 100644
--- a/spec/gridstack-spec.ts
+++ b/spec/gridstack-spec.ts
@@ -248,16 +248,16 @@ describe('gridstack', function() {
     }); 
     it('should set construct CSS class', function() {
       let grid = GridStack.init({column: 1});
-      expect(grid.el.classList.contains('grid-stack-1')).toBe(true);
+      expect(grid.el.classList.contains('gs-1')).toBe(true);
       grid.column(2);
-      expect(grid.el.classList.contains('grid-stack-1')).toBe(false);
-      expect(grid.el.classList.contains('grid-stack-2')).toBe(true);
+      expect(grid.el.classList.contains('gs-1')).toBe(false);
+      expect(grid.el.classList.contains('gs-2')).toBe(true);
     }); 
     it('should set CSS class', function() {
       let grid = GridStack.init();
       expect(grid.el.classList.contains('grid-stack')).toBe(true);
       grid.column(1);
-      expect(grid.el.classList.contains('grid-stack-1')).toBe(true);
+      expect(grid.el.classList.contains('gs-1')).toBe(true);
     }); 
     it('should SMALL change column number, no relayout', function() {
       let options = {
diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss
index b954a312e..b16a711ed 100644
--- a/src/gridstack-extra.scss
+++ b/src/gridstack-extra.scss
@@ -10,8 +10,8 @@ $gridstack-columns: 11 !default;
 }
 
 @mixin grid-stack-items($columns) {
-  .grid-stack-#{$columns} > .grid-stack-item {
-    min-width: fixed(calc(100% / $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); }
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 7207bb6fa..e71529f36 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -40,6 +40,8 @@ $animation_speed: .3s !default;
 // make those more unique as to not conflict with side panel items
 .grid-stack > .grid-stack-item {
   position: absolute;
+  top: 0px;
+  left: 0%;
   padding: 0;
 
   > .grid-stack-item-content {
@@ -132,19 +134,14 @@ $animation_speed: .3s !default;
   @include vendor(transition, left 0s, top 0s, height 0s, width 0s);
 }
 
-// make those more unique as to not conflict with side panel items
-.grid-stack > .grid-stack-item[gs-x="0"] {
-  left: 0%;
-}
-
-.grid-stack-#{$columns} > .grid-stack-item {
-  min-width: fixed(calc(100% / $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)); }
   }
 }
 
-.grid-stack-1 > .grid-stack-item {
-  min-width: 100%;
+.gs-1 > .grid-stack-item {
+  width: 100%;
 }
diff --git a/src/gridstack.ts b/src/gridstack.ts
index f5d53ce1f..e8b020084 100644
--- a/src/gridstack.ts
+++ b/src/gridstack.ts
@@ -336,7 +336,7 @@ export class GridStack {
       this.opts.alwaysShowResizeHandle = isTouch;
     }
 
-    this._styleSheetClass = 'grid-stack-instance-' + GridStackEngine._idSeq++;
+    this._styleSheetClass = 'gs-id-' + GridStackEngine._idSeq++;
     this.el.classList.add(this._styleSheetClass);
 
     this._setStaticClass();
@@ -379,7 +379,7 @@ export class GridStack {
     this.setAnimation(this.opts.animate);
 
     this._updateStyles();
-    this.el.classList.add('grid-stack-' + this.opts.column);
+    this.el.classList.add('gs-' + this.opts.column);
 
     // dynamic grids require pausing during drag to detect over to nest vs push
     if (this.opts.subGridDynamic && !DDManager.pauseDrag) DDManager.pauseDrag = true;
@@ -836,8 +836,8 @@ export class GridStack {
       delete this._prevColumn;
     }
 
-    this.el.classList.remove('grid-stack-' + oldColumn);
-    this.el.classList.add('grid-stack-' + column);
+    this.el.classList.remove('gs-' + oldColumn);
+    this.el.classList.add('gs-' + column);
     this.opts.column = this.engine.column = column;
 
     // update the items now - see if the dom order nodes should be passed instead (else default to current list)
@@ -1348,7 +1348,7 @@ export class GridStack {
       this._styles._max = 0;
 
       // these are done once only
-      Utils.addCSSRule(this._styles, prefix, `min-height: ${cellHeight}${cellHeightUnit}`);
+      Utils.addCSSRule(this._styles, prefix, `height: ${cellHeight}${cellHeightUnit}`);
       // content margins
       let top: string = this.opts.marginTop + this.opts.marginUnit;
       let bottom: string = this.opts.marginBottom + this.opts.marginUnit;
@@ -1372,9 +1372,8 @@ export class GridStack {
     if (maxH > this._styles._max) {
       let getHeight = (rows: number): string => (cellHeight * rows) + cellHeightUnit;
       for (let i = this._styles._max + 1; i <= maxH; i++) { // start at 1
-        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-y="${i}"]`, `top: ${getHeight(i)}`);
+        Utils.addCSSRule(this._styles, `${prefix}[gs-h="${i+1}"]`, `height: ${getHeight(i+1)}`); // start at 2
       }
       this._styles._max = maxH;
     }