From 960de3334aa207430893eb73b741447c8189e949 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alain.dumesny@broadcom.com>
Date: Wed, 22 Jul 2026 13:00:23 -0700
Subject: [PATCH] print hide:true now reflows content after

---
 demo/print.html    |  6 +++---
 src/gridstack.scss | 11 +++++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/demo/print.html b/demo/print.html
index 675d2ef93..1743a85c8 100644
--- a/demo/print.html
+++ b/demo/print.html
@@ -41,11 +41,11 @@ <h2>Second Grid (Default Print Behavior, 6 column)</h2>
     };
     
     let items = [
-      {x: 6, y: 0, w: 4, h: 1, content: 'Item 2<br>(Page 1)'},
+      {x: 6, y: 1, w: 4, h: 1, content: 'Item 2<br>(Page 1)'}, // test floating (due to hidden:true support to reclaim space, will move upwards)
       {x: 1, y: 0, w: 4, h: 2, content: 'Item 1<br>(Page 1)'}, // verify domSort is working
       {x: 0, y: 2, w: 12, h: 1, content: 'Item 3<br><strong>(Starts on Page 2)</strong>', print: { pageBreak: true } },
-      {x: 0, y: 3, w: 6, h: 1, content: 'Item 4<br>(Not Printed)', print: { hide: true } },
-      {x: 6, y: 3, w: 6, h: 1, content: 'Item 5'},
+      {x: 0, y: 3, w: 12, h: 1, content: 'Item 4<br>(Not Printed)', print: { hide: true } },
+      {x: 6, y: 3, w: 6, h: 1, content: 'Item 5'}, // should reflow upwards
       {x: 0, y: 4, w: 12, h: 2, content: 'Item 6<br>(Starts on Landscape Page)', print: { pageBreak: true, orientation: 'landscape' } },
       {x: 0, y: 6, w: 6, h: 1, content: 'Item 7'},
       {x: 0, y: 6, w: 12, h: 2, content: 'Item 8<br>(Starts on Portrait Page)', print: { pageBreak: true, orientation: 'portrait' } },
diff --git a/src/gridstack.scss b/src/gridstack.scss
index 220466f8d..b987ce294 100644
--- a/src/gridstack.scss
+++ b/src/gridstack.scss
@@ -174,10 +174,12 @@
     left: auto !important;
     top: auto !important;
     
-    /* Apply GS coordinates natively via the injected CSS vars */
+    /* Apply GS coordinates natively via the injected CSS vars.
+       We deliberately DO NOT set grid-row-start so that the browser's 
+       CSS Grid engine can natively auto-flow elements upwards, naturally 
+       collapsing any empty rows caused by hidden elements! */
     grid-column-start: calc(var(--gs-x) + 1) !important;
     grid-column-end: span var(--gs-w) !important;
-    grid-row-start: calc(var(--gs-y) + 1) !important;
     grid-row-end: span var(--gs-h) !important;
   }
   .grid-stack > .grid-stack-item[gs-page-break="true"] {
@@ -198,4 +200,9 @@
     /* vmin ensures we get the short edge of the paper */
     min-width: calc(100vmin * var(--gs-w) / var(--gs-columns, 12)) !important;
   }
+  
+  /* Hide interactive elements during print */
+  .grid-stack > .grid-stack-item > .ui-resizable-handle {
+    display: none !important;
+  }
 }