diff --git a/src/managers/ColumnDetector.ts b/src/managers/ColumnDetector.ts
index 9255dab..fec7dff 100644
--- a/src/managers/ColumnDetector.ts
+++ b/src/managers/ColumnDetector.ts
@@ -635,11 +635,27 @@ export class ColumnDetector {
       Promise.all(animations.map(anim => anim.finished)).then(() => {
         root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
         
+        // Update grid-template-rows for all swp-allday-containers
+        const allDayContainers = document.querySelectorAll('swp-allday-container');
+        allDayContainers.forEach(container => {
+          const gridRows = `repeat(${maxRow}, var(--allday-event-height, 26px))`;
+          (container as HTMLElement).style.gridTemplateRows = gridRows;
+        });
+        
         // Notify ScrollManager about header height change
         eventBus.emit('header:height-changed');
       });
       
       console.log(`Animated all-day height: ${currentAllDayHeight}px → ${calculatedHeight}px (max stack: ${maxRow})`);
+    } else {
+      // Height hasn't changed but we still need to update grid-template-rows in case of different row arrangements
+      const allDayContainers = document.querySelectorAll('swp-allday-container');
+      allDayContainers.forEach(container => {
+        const gridRows = `repeat(${maxRow}, var(--allday-event-height, 26px))`;
+        (container as HTMLElement).style.gridTemplateRows = gridRows;
+      });
+      
+      console.log(`All-day height unchanged (${currentAllDayHeight}px) but updated grid-template-rows to ${maxRow} rows`);
     }
   }
 
diff --git a/src/renderers/EventRenderer.ts b/src/renderers/EventRenderer.ts
index e2fce03..de38ab0 100644
--- a/src/renderers/EventRenderer.ts
+++ b/src/renderers/EventRenderer.ts
@@ -251,7 +251,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
   }
 
   /**
-   * Update all-day row height based on number of rows
+   * Update all-day row height and grid template based on number of rows
    */
   private updateAllDayHeight(maxRows: number): void {
     const root = document.documentElement;
@@ -259,7 +259,14 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     const calculatedHeight = maxRows * eventHeight;
     root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
     
-    console.log(`BaseEventRenderer: Set all-day height to ${calculatedHeight}px for ${maxRows} rows`);
+    // Update grid-template-rows for all swp-allday-containers
+    const allDayContainers = document.querySelectorAll('swp-allday-container');
+    allDayContainers.forEach(container => {
+      const gridRows = `repeat(${maxRows}, var(--allday-event-height, 26px))`;
+      (container as HTMLElement).style.gridTemplateRows = gridRows;
+    });
+    
+    console.log(`BaseEventRenderer: Set all-day height to ${calculatedHeight}px and grid-template-rows to ${maxRows} rows`);
   }
 
   /**
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 9caf950..19a03a5 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/wwwroot/css/calendar-layout-css.css
@@ -267,13 +267,13 @@ swp-day-header[data-today="true"] swp-day-date {
 }
 
 
-/* All-day container - simple container that expands with auto-rows */
+/* All-day container - simple container with dynamic grid-template-rows */
 swp-allday-container {
   grid-column: 1 / -1; /* Span all columns */
   grid-row: 2; /* Second row of calendar header */
   display: grid;
   grid-template-columns: repeat(var(--grid-columns, 7), minmax(var(--day-column-min-width), 1fr));
-  grid-auto-rows: var(--allday-event-height, 26px); /* Auto-expand rows as needed */
+  grid-template-rows: repeat(1, var(--allday-event-height, 26px)); /* Default to 1 row, dynamically updated by JS */
   gap: 2px;
   padding: 2px;
   align-items: center;