diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-and-checkbox-selection--navigation-using-tab-and-space-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-and-checkbox-selection--navigation-using-tab-and-space-chromium-linux.png
index 0c54346a5..9567cb90f 100644
--- a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-and-checkbox-selection--navigation-using-tab-and-space-chromium-linux.png
+++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-and-checkbox-selection--navigation-using-tab-and-space-chromium-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7e8c3bcf3a7169b8a711c940bfea7445ec1d3dce93b22456b8be2484b995b1f7
-size 42543
+oid sha256:b316dd48348e94d2578d771b0a68e6247460d13516af91ec17adbabffab3e4dd
+size 42517
diff --git a/playwright/snapshots/e2e/summary-row.spec.ts-snapshots/summary-row-actions--summary-row-actions-chromium-linux.png b/playwright/snapshots/e2e/summary-row.spec.ts-snapshots/summary-row-actions--summary-row-actions-chromium-linux.png
index 20c8f69bf..86dfe5b74 100644
--- a/playwright/snapshots/e2e/summary-row.spec.ts-snapshots/summary-row-actions--summary-row-actions-chromium-linux.png
+++ b/playwright/snapshots/e2e/summary-row.spec.ts-snapshots/summary-row-actions--summary-row-actions-chromium-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bf5764ca1bb68f5dda3a5c2b05c160574211b4ae972f3c28c5d0b655be00e6c5
-size 47514
+oid sha256:e8284a95e817886b7d521448548c3bae98027b273ca3718ba1a07b92df51dc84
+size 47436
diff --git a/projects/ngx-datatable/src/lib/components/body/body-group-wrapper.component.scss b/projects/ngx-datatable/src/lib/components/body/body-group-wrapper.component.scss
index 0a9c64944..e14701101 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-group-wrapper.component.scss
+++ b/projects/ngx-datatable/src/lib/components/body/body-group-wrapper.component.scss
@@ -1,9 +1,11 @@
 :host {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 }
 
 .datatable-group-header {
+  grid-column: 1 / -1;
   inset-inline-start: 0;
   position: sticky;
 }
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-def.component.scss b/projects/ngx-datatable/src/lib/components/body/body-row-def.component.scss
new file mode 100644
index 000000000..ac6f72374
--- /dev/null
+++ b/projects/ngx-datatable/src/lib/components/body/body-row-def.component.scss
@@ -0,0 +1,5 @@
+:host {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+}
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts
index 46c7825c4..67152397b 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts
@@ -2,13 +2,16 @@ import { NgTemplateOutlet } from '@angular/common';
 import {
   Component,
   Directive,
+  effect,
+  ElementRef,
   inject,
   InjectionToken,
   Injector,
   OnInit,
   TemplateRef,
   ViewContainerRef,
-  input
+  input,
+  booleanAttribute
 } from '@angular/core';
 
 import { RowOrGroup } from '../../types/public.types';
@@ -26,14 +29,47 @@ import { RowOrGroup } from '../../types/public.types';
       [ngTemplateOutlet]="rowDef.rowDefInternal().rowTemplate"
       [ngTemplateOutletContext]="rowContext"
     />
-  }`
+  }`,
+  styleUrl: './body-row-def.component.scss'
 })
 export class DatatableRowDefComponent {
+  private host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
   rowDef = inject(ROW_DEF_TOKEN);
   rowContext = {
     ...this.rowDef.rowDefInternal(),
     disabled: this.rowDef.rowDefInternalDisabled()
   };
+
+  /**
+   * When `true`, clones of this row get the measured column widths stamped onto them.
+   * The clone is detached from the table grid, it has no parent tracks to inherit.
+   */
+  readonly preserveColumnWidthsOnClone = input(false, { transform: booleanAttribute });
+
+  constructor() {
+    effect(onCleanup => {
+      if (!this.preserveColumnWidthsOnClone()) {
+        return;
+      }
+      const originalCloneNode = this.host.cloneNode;
+      this.host.cloneNode = (deep?: boolean) => {
+        const clone = originalCloneNode.call(this.host, deep) as HTMLElement;
+        const gridTemplateColumns = this.measureGridTemplateColumns();
+        if (gridTemplateColumns) {
+          clone.style.gridTemplateColumns = gridTemplateColumns;
+        }
+        return clone;
+      };
+      onCleanup(() => (this.host.cloneNode = originalCloneNode));
+    });
+  }
+
+  private measureGridTemplateColumns(): string {
+    const cells = this.host.querySelectorAll<HTMLElement>('datatable-body-cell');
+    return Array.from(cells)
+      .map(cell => `${cell.getBoundingClientRect().width}px`)
+      .join(' ');
+  }
 }
 
 @Directive({
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.scss b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.scss
index b238efb90..9772c1764 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.scss
+++ b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.scss
@@ -1,8 +1,10 @@
 :host {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 }
 
 .datatable-row-detail {
+  grid-column: 1 / -1;
   overflow-y: hidden;
 }
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.scss b/projects/ngx-datatable/src/lib/components/body/body-row.component.scss
index f789d5d39..4c89b4657 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-row.component.scss
+++ b/projects/ngx-datatable/src/lib/components/body/body-row.component.scss
@@ -2,7 +2,8 @@
 
 :host {
   display: grid;
-  grid-template-columns: var(--ngx-datatable-grid-template-columns);
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
   grid-template-rows: minmax(0, 1fr);
   outline: none;
 
diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.spec.ts
index fa86b8048..131004f34 100644
--- a/projects/ngx-datatable/src/lib/components/body/body-row.component.spec.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body-row.component.spec.ts
@@ -12,7 +12,7 @@ describe('DataTableBodyRowComponent', () => {
   @Component({
     imports: [DataTableBodyRowComponent],
     template: `
-      <div [style.--ngx-datatable-grid-template-columns]="gridTemplate()">
+      <div style="display: grid" [style.grid-template-columns]="gridTemplate()">
         <datatable-body-row
           ariaRowCheckboxMessage=""
           [cssClasses]="{}"
diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.scss b/projects/ngx-datatable/src/lib/components/body/body.component.scss
index bd7e4bc60..4c2d44cf9 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.scss
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.scss
@@ -1,19 +1,30 @@
 :host {
   position: relative;
   z-index: 10;
-  display: block;
-  grid-area: body;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  grid-row: 2;
   min-block-size: 0;
 }
 
-datatable-scroller {
-  display: block;
+datatable-scroller,
+.datatable-row-render-wrapper {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-content: start;
 
   :host-context(ngx-datatable.fixed-row) & {
     white-space: nowrap;
   }
 }
 
+.custom-loading-indicator-wrapper,
+ghost-loader {
+  grid-column: 1 / -1;
+}
+
 [hidden] {
   display: none !important; // stylelint-disable-line declaration-no-important
 }
diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
index acf83ea81..f302b8a34 100644
--- a/projects/ngx-datatable/src/lib/components/body/body.component.ts
+++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -158,7 +158,7 @@ import { DataTableSummaryRowComponent } from './summary/summary-row.component';
           </datatable-row-wrapper>
         </ng-template>
 
-        <div [style.transform]="renderOffset()">
+        <div class="datatable-row-render-wrapper" [style.transform]="renderOffset()">
           @for (group of rowsToRender(); track rowTrackingFn(i, group); let i = $index) {
             @if (!group && ghostLoadingIndicator()) {
               <ghost-loader [columns]="columns" [pageSize]="1" [rowHeight]="rowHeight()" />
diff --git a/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.scss b/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.scss
index 993bc37cd..aba80822d 100644
--- a/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.scss
+++ b/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.scss
@@ -1,7 +1,15 @@
 :host {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+
   &.sticky {
     position: sticky;
     inset-block-start: 0;
     z-index: 2;
   }
 }
+
+.datatable-body-row {
+  grid-column: 1 / -1;
+}
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html
index f92ae848b..fc738dfc9 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.html
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.html
@@ -87,7 +87,7 @@
         <datatable-progress />
       </ng-content>
       <ng-content select="[empty-content]" ngProjectAs="[empty-content]">
-        <div role="row">
+        <div role="row" class="datatable-empty-row">
           <div
             role="cell"
             class="empty-row"
diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.scss b/projects/ngx-datatable/src/lib/components/datatable.component.scss
index 0fdc2cba7..40a956bc5 100644
--- a/projects/ngx-datatable/src/lib/components/datatable.component.scss
+++ b/projects/ngx-datatable/src/lib/components/datatable.component.scss
@@ -14,11 +14,8 @@
 
 .datatable-grid {
   display: grid;
-  grid-template-columns: auto;
+  grid-template-columns: var(--ngx-datatable-grid-template-columns, auto);
   grid-template-rows: auto 1fr;
-  grid-template-areas:
-    'header'
-    'body';
   position: relative;
   max-inline-size: 100%;
   min-block-size: 0;
@@ -33,3 +30,7 @@
   overflow-y: auto;
   flex: 1 1 0;
 }
+
+.datatable-empty-row {
+  grid-column: 1 / -1;
+}
diff --git a/projects/ngx-datatable/src/lib/components/header/header.component.scss b/projects/ngx-datatable/src/lib/components/header/header.component.scss
index 7a197c777..12a6a4f59 100644
--- a/projects/ngx-datatable/src/lib/components/header/header.component.scss
+++ b/projects/ngx-datatable/src/lib/components/header/header.component.scss
@@ -1,8 +1,10 @@
 @use '../shared';
 
 :host {
-  display: block;
-  grid-area: header;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  grid-row: 1;
   position: sticky;
   inset-block-start: 0;
   z-index: 11;
@@ -10,7 +12,8 @@
 
 .datatable-header-inner {
   display: grid;
-  grid-template-columns: var(--ngx-datatable-grid-template-columns);
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 
   :host-context(ngx-datatable.fixed-header) & {
     white-space: nowrap;
diff --git a/projects/ngx-datatable/src/lib/components/header/header.component.spec.ts b/projects/ngx-datatable/src/lib/components/header/header.component.spec.ts
index dd2aec2b5..782a1ccaa 100644
--- a/projects/ngx-datatable/src/lib/components/header/header.component.spec.ts
+++ b/projects/ngx-datatable/src/lib/components/header/header.component.spec.ts
@@ -16,9 +16,8 @@ describe('DataTableHeaderComponent', () => {
 
   const applyMockGridTemplate = (): void => {
     fixture.nativeElement.style.width = 'max-content';
-    fixture.nativeElement.style.setProperty(
-      '--ngx-datatable-grid-template-columns',
-      gridColumnTemplate(columnsByPinArr(componentRef.instance.columns()))
+    fixture.nativeElement.style.gridTemplateColumns = gridColumnTemplate(
+      columnsByPinArr(componentRef.instance.columns())
     );
   };
 
diff --git a/src/app/drag-drop/drag-drop.component.ts b/src/app/drag-drop/drag-drop.component.ts
index 8523602b6..37a0f35a3 100644
--- a/src/app/drag-drop/drag-drop.component.ts
+++ b/src/app/drag-drop/drag-drop.component.ts
@@ -45,7 +45,11 @@ import { DataService } from '../data.service';
         (cdkDropListDropped)="drop($event)"
       >
         <ng-template rowDef>
-          <datatable-row-def cdkDrag cdkDragPreviewContainer="parent" />
+          <datatable-row-def
+            cdkDrag
+            cdkDragPreviewContainer="parent"
+            [preserveColumnWidthsOnClone]="true"
+          />
         </ng-template>
       </ngx-datatable>
     </div>