diff --git a/change/@adaptive-web-adaptive-web-components-cc7e748e-c4f1-4ef1-88bf-b0c93ae66117.json b/change/@adaptive-web-adaptive-web-components-cc7e748e-c4f1-4ef1-88bf-b0c93ae66117.json
new file mode 100644
index 00000000..0e6eb5f4
--- /dev/null
+++ b/change/@adaptive-web-adaptive-web-components-cc7e748e-c4f1-4ef1-88bf-b0c93ae66117.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "update data grid styles to use subgrid.",
+  "packageName": "@adaptive-web/adaptive-web-components",
+  "email": "32497422+KingOfTac@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/adaptive-web-components/src/components/data-grid-cell/data-grid-cell.styles.ts b/packages/adaptive-web-components/src/components/data-grid-cell/data-grid-cell.styles.ts
index 77fa74c0..390d4337 100644
--- a/packages/adaptive-web-components/src/components/data-grid-cell/data-grid-cell.styles.ts
+++ b/packages/adaptive-web-components/src/components/data-grid-cell/data-grid-cell.styles.ts
@@ -6,6 +6,7 @@ import { css, ElementStyles } from "@microsoft/fast-element";
  */
 export const templateStyles: ElementStyles = css`
     :host {
+        grid-column: ${x => x.gridColumn ?? 0};
         overflow: hidden;
         white-space: nowrap;
     }
diff --git a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.ts b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.ts
index c9d6c050..7d443dc0 100644
--- a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.ts
+++ b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.styles.ts
@@ -5,6 +5,7 @@ import {
     highlightStrokeReadableRest,
     neutralFillSubtleRest,
 } from "@adaptive-web/adaptive-ui/reference";
+import type { FASTDataGridRow } from "@microsoft/fast-foundation";
 import { heightNumber } from "../../styles/index.js";
 
 /**
@@ -14,6 +15,9 @@ import { heightNumber } from "../../styles/index.js";
 export const templateStyles: ElementStyles = css`
     :host {
         display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / span all;
+        grid-auto-flow: row;
         width: 100%;
     }
 
diff --git a/packages/adaptive-web-components/src/components/data-grid/data-grid.styles.ts b/packages/adaptive-web-components/src/components/data-grid/data-grid.styles.ts
index 65673d3a..c68e83bf 100644
--- a/packages/adaptive-web-components/src/components/data-grid/data-grid.styles.ts
+++ b/packages/adaptive-web-components/src/components/data-grid/data-grid.styles.ts
@@ -1,14 +1,16 @@
 import { css, ElementStyles } from "@microsoft/fast-element";
+import { FASTDataGrid } from "@microsoft/fast-foundation";
 
 /**
  * Basic layout styling associated with the anatomy of the template.
  * @public
  */
-export const templateStyles: ElementStyles = css`
+export const templateStyles: ElementStyles = css<FASTDataGrid>/* CSS */`
     :host {
-        display: flex;
+        display: grid;
         position: relative;
-        flex-direction: column;
+        grid-auto-flow: row;
+        grid-template-columns: repeat(${x => x.columnDefinitions?.length ?? 1}, 1fr);
     }
 
     :host([selection-mode="multi-row"]) {
diff --git a/packages/adaptive-web-components/src/components/data-grid/data-grid.template.ts b/packages/adaptive-web-components/src/components/data-grid/data-grid.template.ts
index ee645735..d9e28ee2 100644
--- a/packages/adaptive-web-components/src/components/data-grid/data-grid.template.ts
+++ b/packages/adaptive-web-components/src/components/data-grid/data-grid.template.ts
@@ -2,7 +2,7 @@ import { ElementViewTemplate } from "@microsoft/fast-element";
 import { dataGridTemplate, FASTDataGrid } from "@microsoft/fast-foundation";
 import { ComponentAnatomy, Interactivity } from "@adaptive-web/adaptive-ui";
 import { DesignSystem } from "../../design-system.js";
-import { composeDataGridRow } from '../data-grid-row/index.js';
+import { composeDataGridRow } from "../data-grid-row/index.js";
 
 /**
  * @public