gridstack · adumesny · Apr 12, 2025 · Apr 12, 2025
diff --git 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
@@ -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="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
@@ -18,7 +18,6 @@ MyComponent CSS
 
 ```css
 @import "gridstack/dist/gridstack.min.css";
-@import "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
@@ -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
@@ -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
@@ -7,7 +7,6 @@
   <title>Column grid demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>

diff --git a/demo/mobile.html b/demo/mobile.html
@@ -7,7 +7,6 @@
   <title>Simple mobile demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
 
 </head>

diff --git 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="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
   <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>

diff --git 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="demo.css"/>
-  <link rel="stylesheet" href="../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
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Constraint nested grids demo</title>
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
   <script src="../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
@@ -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="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.min.css"/>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/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
@@ -8,7 +8,6 @@
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
 
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-jq.js"></script>
 </head>

diff --git 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="demo.css" />
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
 
   <!-- Scripts to use react inside html - DEVELOPMENT FILES -->

diff --git a/demo/responsive.html b/demo/responsive.html
@@ -4,7 +4,6 @@
   <title>Responsive column</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>

diff --git a/demo/responsive_break.html b/demo/responsive_break.html
@@ -4,7 +4,6 @@
   <title>Responsive breakpoint</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
 </head>
 <body>

diff --git a/demo/responsive_none.html b/demo/responsive_none.html
@@ -7,7 +7,6 @@
   <title>Responsive layout:'none'</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
 
 </head>

diff --git a/demo/sizeToContent.html b/demo/sizeToContent.html
@@ -7,7 +7,6 @@
   <title>sizeToContent demo</title>
 
   <link rel="stylesheet" href="demo.css"/>
-  <link rel="stylesheet" href="../dist/gridstack-extra.css"/>
   <script src="../dist/gridstack-all.js"></script>
   <style type="text/css">
     .grid-stack-item-content {

diff --git 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="demo.css"/>
-  <link rel="stylesheet" href="../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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -9,7 +9,6 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="../../../demo/demo.css"/>
   <script src="../../../dist/gridstack-all.js"></script>
-  <link rel="stylesheet" href="../../../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
@@ -7,7 +7,6 @@
   <title>Changing Column a lot</title>
 
   <link rel="stylesheet" href="../../../demo/demo.css"/>
-  <link rel="stylesheet" href="../../../dist/gridstack-extra.min.css"/>
   <script src="../../../dist/gridstack-all.js"></script>
 
 </head>

diff --git 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="../../../demo/demo.css"/>
-  <link rel="stylesheet" href="../../../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
@@ -7,7 +7,6 @@
   <title>#2394 Save sub item moved</title>
 
   <link rel="stylesheet" href="../../../demo/demo.css" />
-  <link rel="stylesheet" href="../../../dist/gridstack-extra.min.css"/>
   <script src="../../../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
@@ -8,7 +8,6 @@
   <title>Float grid demo</title>
 
   <link rel="stylesheet" href="../../../demo/demo.css" />
-  <link rel="stylesheet" href="../../../dist/gridstack-extra.css" />
   <script src="../../../dist/gridstack-all.js"></script>
 
 </head>

diff --git 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="../../../demo/demo.css" />
-  <link rel="stylesheet" href="../../../dist/gridstack-extra.css" />
   <script src="../../../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
@@ -8,7 +8,6 @@
   <title>Column insert bug #2576</title>
   <link rel="stylesheet" href="../../../demo/demo.css" />
   <script src="../../../dist/gridstack-all.js"></script>
-  <link rel="stylesheet" href="../../../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
@@ -6,7 +6,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>2864 nest grid resize</title>
   <link rel="stylesheet" href="../../../demo/demo.css"/>
-  <link rel="stylesheet" href="../../../dist/gridstack-extra.css"/>
   <script src="../../../dist/gridstack-all.js"></script>
 </head>
 <body>