diff --git a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
index e6ecaea017..b963d60549 100644
--- a/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
+++ b/packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss
@@ -394,21 +394,14 @@ $root: ".widget-datagrid";
             display: grid !important;
             min-width: fit-content;
             margin-bottom: 0;
+            &.infinite-loading {
+                // in order to restrict the scroll to row area
+                // we need to prevent table itself to expanding beyond available position
+                min-width: 0;
+            }
         }
     }
 
-    &-content {
-        overflow-x: auto;
-    }
-
-    &-grid-head {
-        display: contents;
-    }
-
-    &-grid-body {
-        display: contents;
-    }
-
     &.widget-datagrid-selection-method-click {
         .tr.tr-selected .td {
             background-color: $grid-selected-row-background;
@@ -520,24 +513,57 @@ $root: ".widget-datagrid";
     margin: 0 auto;
 }
 
-.infinite-loading.widget-datagrid-grid-body {
-    // when virtual scroll is enabled we make area that holds rows scrollable
-    // (while the area that holds column headers still stays in place)
-    overflow-y: auto;
+.infinite-loading {
+    .widget-datagrid-grid-head {
+        width: calc(var(--mx-grid-width) - var(--mx-grid-scrollbar-size));
+        overflow-x: hidden;
+    }
+    .widget-datagrid-grid-head[data-scrolled-y="true"] {
+        box-shadow: 0 5px 5px -5px gray;
+    }
+
+    .widget-datagrid-grid-body {
+        width: var(--mx-grid-width);
+        overflow-y: auto;
+        max-height: var(--mx-grid-body-height);
+    }
+
+    .widget-datagrid-grid-head[data-scrolled-x="true"]:after {
+        content: "";
+        position: absolute;
+        left: 0px;
+        width: 10px;
+        box-shadow: inset 5px 0 5px -5px gray;
+        top: 0;
+        bottom: 0;
+    }
 }
 
-.widget-datagrid-grid-head,
+.widget-datagrid-grid-head {
+    display: grid;
+
+    // this head is not part of the grid, so it has dedicated column template  --mx-grid-template-columns-head
+    // but it might not be available at the initial render, so we use template from the grid --mx-grid-template-columns
+    // using template from the grid might to misalignment from the grid itself,
+    // but in practice:
+    //   - grid has no data at that moment, so misalignment is not visible.
+    //   - as soon as the grid itself gets rendered --mx-grid-template-columns-head gets calculated
+    //     and everything looks like it should.
+    grid-template-columns: var(--mx-grid-template-columns-head, var(--mx-grid-template-columns));
+}
 .widget-datagrid-grid-body {
     // this element has to position their children (columns or headers)
     // as grid and have those aligned with the parent grid
     display: grid;
     // this property makes sure we align our own grid columns
     // to the columns defined in the global grid
-    grid-template-columns: subgrid;
+    grid-template-columns: var(--mx-grid-template-columns);
+}
 
-    // ensure that we cover all columns of original top level grid
-    // so our own columns get aligned with the parent
+.grid-mock-header {
+    grid-template-columns: subgrid;
     grid-column: 1 / -1;
+    display: grid;
 }
 
 :where(#{$root}-paging-bottom) {
diff --git a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
index b9bea86823..074d8e6e66 100644
--- a/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
+++ b/packages/pluggableWidgets/datagrid-web/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+- We improved virtual scrolling behavior when horizontal scrolling is present due to grid size.
+
 ### Added
 
 - We fixed an issue where missing consistency checks for the captions were causing runtime errors instead of in Studio Pro
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx
index 4a4e61d9ec..0ac6a69f8f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Grid.tsx
@@ -1,17 +1,25 @@
 import classNames from "classnames";
-import { JSX, ReactElement } from "react";
+import { JSX, ReactElement, RefObject } from "react";
 
 type P = Omit<JSX.IntrinsicElements["div"], "role" | "ref">;
 
 export interface GridProps extends P {
     className?: string;
+    isInfinite: boolean;
+    containerRef: RefObject<HTMLDivElement | null>;
 }
 
 export function Grid(props: GridProps): ReactElement {
-    const { className, style, children, ...rest } = props;
+    const { className, style, children, isInfinite, containerRef, ...rest } = props;
 
     return (
-        <div className={classNames("widget-datagrid-grid table", className)} role="grid" style={style} {...rest}>
+        <div
+            className={classNames("widget-datagrid-grid table", { "infinite-loading": isInfinite }, className)}
+            role="grid"
+            style={style}
+            ref={containerRef}
+            {...rest}
+        >
             {children}
         </div>
     );
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx b/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
index b9c3e76bb1..4cd31d2537 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/GridBody.tsx
@@ -1,9 +1,8 @@
 import classNames from "classnames";
-import { Fragment, ReactElement, ReactNode } from "react";
-import { LoadingTypeEnum, PaginationEnum } from "../../typings/DatagridProps";
+import { Fragment, ReactElement, ReactNode, RefObject } from "react";
+import { LoadingTypeEnum } from "../../typings/DatagridProps";
 import { SpinnerLoader } from "./loader/SpinnerLoader";
 import { RowSkeletonLoader } from "./loader/RowSkeletonLoader";
-import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
 
 interface Props {
     className?: string;
@@ -15,20 +14,12 @@ interface Props {
     columnsSize: number;
     rowsSize: number;
     pageSize: number;
-    pagination: PaginationEnum;
-    hasMoreItems: boolean;
-    setPage?: (update: (page: number) => number) => void;
+    trackScrolling?: (e: any) => void;
+    bodyRef: RefObject<HTMLDivElement | null>;
 }
 
 export function GridBody(props: Props): ReactElement {
-    const { children, pagination, hasMoreItems, setPage } = props;
-
-    const isInfinite = pagination === "virtualScrolling";
-    const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
-        hasMoreItems,
-        isInfinite,
-        setPage
-    });
+    const { children, bodyRef, trackScrolling } = props;
 
     const content = (): ReactElement => {
         if (props.isFirstLoad) {
@@ -44,15 +35,10 @@ export function GridBody(props: Props): ReactElement {
 
     return (
         <div
-            className={classNames(
-                "widget-datagrid-grid-body table-content",
-                { "infinite-loading": isInfinite },
-                props.className
-            )}
-            style={isInfinite && bodySize > 0 ? { maxHeight: `${bodySize}px` } : {}}
+            className={classNames("widget-datagrid-grid-body table-content", props.className)}
             role="rowgroup"
-            ref={containerRef}
-            onScroll={isInfinite ? trackScrolling : undefined}
+            ref={bodyRef}
+            onScroll={trackScrolling}
         >
             {content()}
         </div>
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx
index 5ef8785352..9565a39b59 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/GridHeader.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useCallback, useState } from "react";
+import { ReactElement, ReactNode, RefObject, useCallback, useState } from "react";
 import { ColumnId, GridColumn } from "../typings/GridColumn";
 import { CheckboxColumnHeader } from "./CheckboxColumnHeader";
 import { ColumnResizer } from "./ColumnResizer";
@@ -21,6 +21,7 @@ type GridHeaderProps = {
     id: string;
     isLoading: boolean;
     preview?: boolean;
+    headerRef: RefObject<HTMLDivElement | null>;
 };
 
 export function GridHeader({
@@ -37,7 +38,8 @@ export function GridHeader({
     headerWrapperRenderer,
     id,
     isLoading,
-    preview
+    preview,
+    headerRef
 }: GridHeaderProps): ReactElement {
     const [dragOver, setDragOver] = useState<[ColumnId, "before" | "after"] | undefined>(undefined);
     const [isDragging, setIsDragging] = useState<[ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined>();
@@ -56,7 +58,7 @@ export function GridHeader({
     }
 
     return (
-        <div className="widget-datagrid-grid-head" role="rowgroup">
+        <div className="widget-datagrid-grid-head" role="rowgroup" ref={headerRef}>
             <div key="headers_row" className="tr" role="row">
                 <CheckboxColumnHeader key="headers_column_select_all" />
                 {columns.map((column, index) =>
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx
index 54c35f8c6a..d669ea1a8f 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Header.tsx
@@ -70,7 +70,6 @@ export function Header(props: HeaderProps): ReactElement {
             role="columnheader"
             style={!canSort ? { cursor: "unset" } : undefined}
             title={caption}
-            ref={ref => props.column.setHeaderElementRef(ref)}
             data-column-id={props.column.columnId}
             onDrop={draggableProps.onDrop}
             onDragEnter={draggableProps.onDragEnter}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx b/packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx
new file mode 100644
index 0000000000..fb07278ca5
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/components/MockHeader.tsx
@@ -0,0 +1,65 @@
+import { GridColumn } from "../typings/GridColumn";
+import { ReactNode, useCallback, useEffect, useRef } from "react";
+
+function getColumnSizes(container: HTMLDivElement | null): Map<string, number> {
+    const sizes = new Map<string, number>();
+    if (container) {
+        container.querySelectorAll<HTMLDivElement>("[data-column-id]").forEach(c => {
+            const columnId = c.dataset.columnId;
+            if (!columnId) {
+                console.debug("getColumnSizes: can't find id on:", c);
+                return;
+            }
+            sizes.set(columnId, c.offsetWidth);
+        });
+    }
+
+    return sizes;
+}
+
+interface MockHeaderProps {
+    visibleColumns: GridColumn[];
+    showCheckboxColumn: boolean;
+    showColumnSelectorColumn: boolean;
+    updateColumnSizes: (sizes: number[]) => void;
+}
+
+export function MockHeader({
+    visibleColumns,
+    showCheckboxColumn,
+    showColumnSelectorColumn,
+    updateColumnSizes
+}: MockHeaderProps): ReactNode {
+    const headerRef = useRef<HTMLDivElement | null>(null);
+    const resizeCallback = useCallback<ResizeObserverCallback>(() => {
+        updateColumnSizes(getColumnSizes(headerRef.current).values().toArray());
+    }, [headerRef, updateColumnSizes]);
+
+    useEffect(() => {
+        const observer = new ResizeObserver(resizeCallback);
+
+        if (headerRef.current) {
+            observer.observe(headerRef.current);
+        }
+        return () => {
+            observer.disconnect();
+        };
+    }, [resizeCallback, headerRef]);
+
+    return (
+        <div className={"grid-mock-header"} aria-hidden ref={headerRef}>
+            {showCheckboxColumn && <div data-column-id="checkboxes" key={"checkboxes"}></div>}
+            {visibleColumns.map(c => (
+                <div
+                    data-column-id={c.columnId}
+                    key={c.columnId}
+                    // we set header ref here instead of the real header
+                    // as this mock header is aligned with CSS grid, so it is more reliable
+                    // the real header is aligned programmatically based on this header
+                    ref={ref => c.setHeaderElementRef(ref)}
+                ></div>
+            ))}
+            {showColumnSelectorColumn && <div data-column-id="selector" key={"selector"}></div>}
+        </div>
+    );
+}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
index 70b7ae1aed..9f5d4675b3 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/Widget.tsx
@@ -4,7 +4,7 @@ import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navig
 import classNames from "classnames";
 import { ListActionValue, ObjectItem } from "mendix";
 import { observer } from "mobx-react-lite";
-import { CSSProperties, Fragment, ReactElement, ReactNode } from "react";
+import { CSSProperties, Fragment, ReactElement, ReactNode, useState } from "react";
 import {
     LoadingTypeEnum,
     PaginationEnum,
@@ -25,6 +25,8 @@ import { WidgetFooter } from "./WidgetFooter";
 import { WidgetHeader } from "./WidgetHeader";
 import { WidgetRoot } from "./WidgetRoot";
 import { WidgetTopBar } from "./WidgetTopBar";
+import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
+import { MockHeader } from "./MockHeader";
 
 export interface WidgetProps<C extends GridColumn, T extends ObjectItem = ObjectItem> {
     CellComponent: CellComponent<C>;
@@ -151,12 +153,28 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
         />
     ) : null;
 
-    const cssGridStyles = gridStyle(visibleColumns, {
-        selectItemColumn: selectActionHelper.showCheckboxColumn,
-        visibilitySelectorColumn: columnsHidable
-    });
-
     const selectionEnabled = selectActionHelper.selectionType !== "None";
+    const isInfinite = paginationType === "virtualScrolling";
+
+    const [trackBodyScrolling, bodyHeight, gridWidth, scrollBarSize, gridBodyRef, gridContainerRef, gridHeaderRef] =
+        useInfiniteControl({
+            setPage,
+            isInfinite,
+            hasMoreItems
+        });
+
+    const [headerSizes, setHeaderSizes] = useState<number[] | undefined>(undefined);
+
+    const gridRootStyles = {
+        ...gridStyle(visibleColumns, {
+            selectItemColumn: selectActionHelper.showCheckboxColumn,
+            visibilitySelectorColumn: columnsHidable
+        }),
+        "--mx-grid-template-columns-header": headerSizes?.map(v => `${v}px`).join(" "),
+        "--mx-grid-width": gridWidth,
+        "--mx-grid-body-height": bodyHeight,
+        "--mx-grid-scrollbar-size": scrollBarSize
+    };
 
     return (
         <Fragment>
@@ -165,7 +183,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
             <WidgetContent>
                 <Grid
                     aria-multiselectable={selectionEnabled ? selectActionHelper.selectionType === "Multi" : undefined}
-                    style={cssGridStyles}
+                    style={gridRootStyles}
+                    containerRef={gridContainerRef}
+                    isInfinite={isInfinite}
                 >
                     <GridHeader
                         availableColumns={props.availableColumns}
@@ -182,6 +202,7 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         id={props.id}
                         isLoading={props.columnsLoading}
                         preview={props.preview}
+                        headerRef={gridHeaderRef}
                     />
                     {showRefreshIndicator ? <RefreshIndicator /> : null}
                     <GridBody
@@ -192,10 +213,15 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         columnsSize={visibleColumns.length}
                         rowsSize={rows.length}
                         pageSize={pageSize}
-                        pagination={props.paginationType}
-                        hasMoreItems={hasMoreItems}
-                        setPage={setPage}
+                        trackScrolling={trackBodyScrolling}
+                        bodyRef={gridBodyRef}
                     >
+                        <MockHeader
+                            showCheckboxColumn={selectActionHelper.showCheckboxColumn}
+                            showColumnSelectorColumn={columnsHidable}
+                            visibleColumns={visibleColumns}
+                            updateColumnSizes={setHeaderSizes}
+                        />
                         <RowsRenderer
                             preview={props.preview ?? false}
                             interactive={basicData.gridInteractive}
@@ -258,8 +284,8 @@ function gridStyle(columns: GridColumn[], optional: OptionalColumns): CSSPropert
     }
 
     return {
-        gridTemplateColumns: sizes.join(" ")
-    };
+        "--mx-grid-template-columns": sizes.join(" ")
+    } as any;
 }
 
 type OptionalColumns = {
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
index 82dcd37e3f..bff64a6ba1 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/Table.spec.tsx
@@ -32,6 +32,12 @@ window.IntersectionObserver = jest.fn(() => ({
     takeRecords: jest.fn()
 }));
 
+window.ResizeObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn()
+}));
+
 function withCtx(
     widgetProps: WidgetProps<GridColumn, ObjectItem>,
     contextOverrides: Partial<DatagridRootScope> = {}
diff --git a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap
index cdc8ba6713..6753b42539 100644
--- a/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap
+++ b/packages/pluggableWidgets/datagrid-web/src/components/__tests__/__snapshots__/Table.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`Table renders the structure correctly 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -48,6 +48,14 @@ exports[`Table renders the structure correctly 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -97,7 +105,7 @@ exports[`Table renders the structure correctly for preview when no header is pro
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -134,6 +142,14 @@ exports[`Table renders the structure correctly for preview when no header is pro
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr tr-preview"
             role="row"
@@ -183,7 +199,7 @@ exports[`Table renders the structure correctly with column alignments 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr 1fr;"
+        style="--mx-grid-template-columns: 1fr 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -241,6 +257,17 @@ exports[`Table renders the structure correctly with column alignments 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+            <div
+              data-column-id="1"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -302,7 +329,7 @@ exports[`Table renders the structure correctly with custom filtering 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -343,6 +370,14 @@ exports[`Table renders the structure correctly with custom filtering 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -392,7 +427,7 @@ exports[`Table renders the structure correctly with dragging 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -429,6 +464,14 @@ exports[`Table renders the structure correctly with dragging 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -478,7 +521,7 @@ exports[`Table renders the structure correctly with dynamic row class 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -515,6 +558,14 @@ exports[`Table renders the structure correctly with dynamic row class 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr myclass"
             role="row"
@@ -564,7 +615,7 @@ exports[`Table renders the structure correctly with empty placeholder 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -601,6 +652,14 @@ exports[`Table renders the structure correctly with empty placeholder 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -650,7 +709,7 @@ exports[`Table renders the structure correctly with filtering 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -691,6 +750,14 @@ exports[`Table renders the structure correctly with filtering 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -750,7 +817,7 @@ exports[`Table renders the structure correctly with header filters and a11y 1`]
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -787,6 +854,14 @@ exports[`Table renders the structure correctly with header filters and a11y 1`]
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -836,7 +911,7 @@ exports[`Table renders the structure correctly with header wrapper 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -877,6 +952,14 @@ exports[`Table renders the structure correctly with header wrapper 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -926,7 +1009,7 @@ exports[`Table renders the structure correctly with hiding 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr 54px;"
+        style="--mx-grid-template-columns: 1fr 54px;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -999,6 +1082,17 @@ exports[`Table renders the structure correctly with hiding 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+            <div
+              data-column-id="selector"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -1053,7 +1147,7 @@ exports[`Table renders the structure correctly with paging 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -1090,6 +1184,14 @@ exports[`Table renders the structure correctly with paging 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -1229,7 +1331,7 @@ exports[`Table renders the structure correctly with resizing 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -1266,6 +1368,14 @@ exports[`Table renders the structure correctly with resizing 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -1315,7 +1425,7 @@ exports[`Table renders the structure correctly with sorting 1`] = `
       <div
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -1352,6 +1462,14 @@ exports[`Table renders the structure correctly with sorting 1`] = `
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             class="tr"
             role="row"
@@ -1402,7 +1520,7 @@ exports[`Table with selection method checkbox render an extra column and add cla
         aria-multiselectable="false"
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 48px 1fr;"
+        style="--mx-grid-template-columns: 48px 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -1443,6 +1561,17 @@ exports[`Table with selection method checkbox render an extra column and add cla
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="checkboxes"
+            />
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             aria-selected="true"
             class="tr tr-selected"
@@ -1659,7 +1788,7 @@ exports[`Table with selection method rowClick add class to each selected cell 1`
         aria-multiselectable="false"
         class="widget-datagrid-grid table"
         role="grid"
-        style="grid-template-columns: 1fr;"
+        style="--mx-grid-template-columns: 1fr;"
       >
         <div
           class="widget-datagrid-grid-head"
@@ -1696,6 +1825,14 @@ exports[`Table with selection method rowClick add class to each selected cell 1`
           class="widget-datagrid-grid-body table-content"
           role="rowgroup"
         >
+          <div
+            aria-hidden="true"
+            class="grid-mock-header"
+          >
+            <div
+              data-column-id="0"
+            />
+          </div>
           <div
             aria-selected="true"
             class="tr tr-selected"
diff --git a/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx b/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx
index dd5264bf2c..8f85ded577 100644
--- a/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx
@@ -28,6 +28,8 @@ export class ColumnStore implements GridColumn {
     private baseInfo: BaseColumnInfo;
     private parentStore: IColumnParentStore;
 
+    // this holds size of the column that it had prior to resizing started
+    // this is needed to prevent personalization being saved while resizing
     private frozenSize: number | undefined;
 
     // dynamic props from PW API
diff --git a/packages/shared/widget-plugin-grid/src/components/InfiniteBody.tsx b/packages/shared/widget-plugin-grid/src/components/InfiniteBody.tsx
index ffbf811670..5b07ac4cd0 100644
--- a/packages/shared/widget-plugin-grid/src/components/InfiniteBody.tsx
+++ b/packages/shared/widget-plugin-grid/src/components/InfiniteBody.tsx
@@ -1,36 +1,51 @@
-import {
-    CSSProperties,
-    PropsWithChildren,
-    ReactElement,
-    RefObject,
-    useCallback,
-    useLayoutEffect,
-    useRef,
-    useState
-} from "react";
-import classNames from "classnames";
+import { PropsWithChildren, RefObject, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { useOnScreen } from "@mendix/widget-plugin-hooks/useOnScreen";
 
 export interface InfiniteBodyProps {
-    className?: string;
     hasMoreItems: boolean;
     isInfinite: boolean;
-    role?: string;
     setPage?: (computePage: (prevPage: number) => number) => void;
-    style?: CSSProperties;
 }
 const offsetBottom = 30;
 
 export function useInfiniteControl(
     props: PropsWithChildren<InfiniteBodyProps>
-): [trackScrolling: (e: any) => void, bodySize: number, containerRef: RefObject<HTMLDivElement | null>] {
+): [
+    trackBodyScrolling: ((e: any) => void) | undefined,
+    bodyHeight: string | undefined,
+    gridWidth: string | undefined,
+    scrollBarSize: string | undefined,
+    gridBodyRef: RefObject<HTMLDivElement | null>,
+    gridContainerRef: RefObject<HTMLDivElement | null>,
+    gridHeaderRef: RefObject<HTMLDivElement | null>
+] {
     const { setPage, hasMoreItems, isInfinite } = props;
-    const [bodySize, setBodySize] = useState<number>(0);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const isVisible = useOnScreen(containerRef as RefObject<HTMLElement>);
+    const [gridWidth, setGridWidth] = useState<string | undefined>();
+    const [bodyHeight, setBodyHeight] = useState<string | undefined>();
+    const [scrollBarSize, setScrollBarSize] = useState<string | undefined>();
+    const gridContainerRef = useRef<HTMLDivElement | null>(null);
+    const gridBodyRef = useRef<HTMLDivElement>(null);
+    const gridHeaderRef = useRef<HTMLDivElement | null>(null);
+    const isVisible = useOnScreen(gridBodyRef as RefObject<HTMLElement>);
 
-    const trackScrolling = useCallback(
+    const trackBodyScrolling = useCallback(
         (e: any) => {
+            const head = gridHeaderRef.current;
+            if (head) {
+                // synchronize header position to the body as they are decoupled
+                // we don't use state to optimize speed as we
+                // don't want a re-render.
+                head.scrollTo({ left: e.target.scrollLeft });
+
+                // this is cosmetic, needed to provide nice shadows when body is scrolled
+                head.dataset.scrolledY = e.target.scrollTop > 0 ? "true" : "false";
+                head.dataset.scrolledX = e.target.scrollLeft > 0 ? "true" : "false";
+            }
+
+            // we need to determine scrollbar width to calculate header size correctly in css
+            const scrollBarSize = e.target.offsetWidth - e.target.clientWidth;
+            setScrollBarSize(`${scrollBarSize}px`);
+
             /**
              * In Windows OS the result of first expression returns a non integer and result in never loading more, require floor to solve.
              * note: Math floor sometimes result in incorrect integer value,
@@ -48,31 +63,40 @@ export function useInfiniteControl(
         [hasMoreItems, setPage]
     );
 
-    const calculateBodyHeight = useCallback((): void => {
-        if (isVisible && isInfinite && hasMoreItems && bodySize <= 0 && containerRef.current) {
-            setBodySize(containerRef.current.clientHeight - offsetBottom);
+    const lockGridBodyHeight = useCallback((): void => {
+        if (isVisible && isInfinite && hasMoreItems && bodyHeight === undefined && gridBodyRef.current) {
+            setBodyHeight(`${gridBodyRef.current.clientHeight - offsetBottom}px`);
         }
-    }, [isInfinite, hasMoreItems, bodySize, isVisible]);
+    }, [isInfinite, hasMoreItems, bodyHeight, isVisible]);
 
     useLayoutEffect(() => {
-        setTimeout(() => calculateBodyHeight(), 100);
-    }, [calculateBodyHeight]);
+        setTimeout(() => lockGridBodyHeight(), 100);
+    }, [lockGridBodyHeight]);
 
-    return [trackScrolling, bodySize, containerRef];
-}
+    useLayoutEffect(() => {
+        const observeTarget = gridContainerRef.current;
+        if (!isInfinite || !observeTarget) return;
 
-export function InfiniteBody(props: PropsWithChildren<InfiniteBodyProps>): ReactElement {
-    const { className, isInfinite } = props;
-    const [trackScrolling, bodySize, containerRef] = useInfiniteControl(props);
-    return (
-        <div
-            ref={containerRef}
-            className={classNames(className, isInfinite ? "infinite-loading" : "")}
-            onScroll={isInfinite ? trackScrolling : undefined}
-            role={props.role}
-            style={isInfinite && bodySize > 0 ? { ...props.style, maxHeight: bodySize } : props.style}
-        >
-            {props.children}
-        </div>
-    );
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                setGridWidth(entry.target.clientWidth ? `${entry.target.clientWidth}px` : undefined);
+            }
+        });
+
+        resizeObserver.observe(observeTarget);
+
+        return () => {
+            resizeObserver.unobserve(observeTarget);
+        };
+    }, [isInfinite]);
+
+    return [
+        isInfinite ? trackBodyScrolling : undefined,
+        bodyHeight,
+        gridWidth,
+        scrollBarSize,
+        gridBodyRef,
+        gridContainerRef,
+        gridHeaderRef
+    ];
 }