From 3a09ffd3ed456c838fd57ce2088eb24b18e4824a Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:28:59 -0700
Subject: [PATCH 1/5] update data grid styles to use subgrid.

---
 .../src/components/anchor/anchor.options.ts               | 5 +++++
 .../src/components/data-grid-row/data-grid-row.compose.ts | 3 ++-
 .../src/components/data-grid-row/data-grid-row.styles.ts  | 6 +++++-
 .../src/components/data-grid-row/data-grid-row.ts         | 7 +++++++
 .../src/components/data-grid/data-grid.styles.ts          | 8 +++++---
 5 files changed, 24 insertions(+), 5 deletions(-)
 create mode 100644 packages/adaptive-web-components/src/components/anchor/anchor.options.ts
 create mode 100644 packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.ts

diff --git a/packages/adaptive-web-components/src/components/anchor/anchor.options.ts b/packages/adaptive-web-components/src/components/anchor/anchor.options.ts
new file mode 100644
index 00000000..1f7f169e
--- /dev/null
+++ b/packages/adaptive-web-components/src/components/anchor/anchor.options.ts
@@ -0,0 +1,5 @@
+import { ComposeOptions } from "../../design-system.js";
+
+export default {
+    baseName: "anchor"
+} as ComposeOptions;
\ No newline at end of file
diff --git a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
index 4626174b..a1d92edb 100644
--- a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
+++ b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
@@ -4,6 +4,7 @@ import { ComposeOptions, DesignSystem } from "../../design-system.js";
 import { componentBaseStyles } from "../../styles/styles.js";
 import { aestheticStyles, templateStyles } from "./data-grid-row.styles.js";
 import { DataGridRowAnatomy, template } from "./data-grid-row.template.js";
+import { DataGridRow } from './data-grid-row.js';
 
 const defaultStyles = [componentBaseStyles, templateStyles, aestheticStyles];
 
@@ -16,7 +17,7 @@ export function composeDataGridRow(
 ): FASTElementDefinition {
     const styles = DesignSystem.assembleStyles(defaultStyles, DataGridRowAnatomy, options);
 
-    return FASTDataGridRow.compose({
+    return DataGridRow.compose({
         name: `${ds.prefix}-data-grid-row`,
         template: options?.template?.(ds) ?? template(ds),
         styles,
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..4daeb558 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
@@ -6,14 +6,18 @@ import {
     neutralFillSubtleRest,
 } from "@adaptive-web/adaptive-ui/reference";
 import { heightNumber } from "../../styles/index.js";
+import { DataGridRow } from './data-grid-row.js';
 
 /**
  * Basic layout styling associated with the anatomy of the template.
  * @public
  */
-export const templateStyles: ElementStyles = css`
+export const templateStyles: ElementStyles = css<DataGridRow>/* CSS */`
     :host {
         display: grid;
+        grid-template-columns: subgrid;
+        grid-column: span ${x => x.columnDefinitions?.length ?? 1 };
+        grid-auto-flow: row;
         width: 100%;
     }
 
diff --git a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.ts b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.ts
new file mode 100644
index 00000000..311b46f0
--- /dev/null
+++ b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.ts
@@ -0,0 +1,7 @@
+import { FASTDataGridRow } from '@microsoft/fast-foundation';
+
+export class DataGridRow extends FASTDataGridRow {
+    protected updateRowStyle(): void {
+        return;
+    }
+}
\ No newline at end of file
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..783af696 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: ${x => x.gridTemplateColumns};
     }
 
     :host([selection-mode="multi-row"]) {

From 07cfefa2fef63f32b085ad8401c26b4fb226fc2a Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Mon, 8 Jan 2024 12:29:17 -0700
Subject: [PATCH 2/5] Change files

---
 ...eb-components-cc7e748e-c4f1-4ef1-88bf-b0c93ae66117.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@adaptive-web-adaptive-web-components-cc7e748e-c4f1-4ef1-88bf-b0c93ae66117.json

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"
+}

From 7a2cbfe6a47608ca785c96994f9d28b647144173 Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Mon, 8 Jan 2024 14:16:26 -0700
Subject: [PATCH 3/5] remove unrelated file that was accidentally committed

---
 .../src/components/anchor/anchor.options.ts                  | 5 -----
 .../src/components/data-grid-row/data-grid-row.compose.ts    | 2 +-
 .../src/components/data-grid-row/data-grid-row.styles.ts     | 2 +-
 3 files changed, 2 insertions(+), 7 deletions(-)
 delete mode 100644 packages/adaptive-web-components/src/components/anchor/anchor.options.ts

diff --git a/packages/adaptive-web-components/src/components/anchor/anchor.options.ts b/packages/adaptive-web-components/src/components/anchor/anchor.options.ts
deleted file mode 100644
index 1f7f169e..00000000
--- a/packages/adaptive-web-components/src/components/anchor/anchor.options.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ComposeOptions } from "../../design-system.js";
-
-export default {
-    baseName: "anchor"
-} as ComposeOptions;
\ No newline at end of file
diff --git a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
index a1d92edb..17f74ad2 100644
--- a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
+++ b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
@@ -4,7 +4,7 @@ import { ComposeOptions, DesignSystem } from "../../design-system.js";
 import { componentBaseStyles } from "../../styles/styles.js";
 import { aestheticStyles, templateStyles } from "./data-grid-row.styles.js";
 import { DataGridRowAnatomy, template } from "./data-grid-row.template.js";
-import { DataGridRow } from './data-grid-row.js';
+import { DataGridRow } from "./data-grid-row.js";
 
 const defaultStyles = [componentBaseStyles, templateStyles, aestheticStyles];
 
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 4daeb558..5b90000a 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
@@ -6,7 +6,7 @@ import {
     neutralFillSubtleRest,
 } from "@adaptive-web/adaptive-ui/reference";
 import { heightNumber } from "../../styles/index.js";
-import { DataGridRow } from './data-grid-row.js';
+import { DataGridRow } from "./data-grid-row.js";
 
 /**
  * Basic layout styling associated with the anatomy of the template.

From 4c42f929d2343b22492e93afbda6e2f837e6439a Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Tue, 9 Jan 2024 11:19:00 -0700
Subject: [PATCH 4/5] update grid styles

---
 .../src/components/data-grid-cell/data-grid-cell.styles.ts | 1 +
 .../src/components/data-grid-row/data-grid-row.compose.ts  | 3 +--
 .../src/components/data-grid-row/data-grid-row.styles.ts   | 6 +++---
 .../src/components/data-grid-row/data-grid-row.ts          | 7 -------
 .../src/components/data-grid/data-grid.styles.ts           | 2 +-
 5 files changed, 6 insertions(+), 13 deletions(-)
 delete mode 100644 packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.ts

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.compose.ts b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
index 17f74ad2..4626174b 100644
--- a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
+++ b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.compose.ts
@@ -4,7 +4,6 @@ import { ComposeOptions, DesignSystem } from "../../design-system.js";
 import { componentBaseStyles } from "../../styles/styles.js";
 import { aestheticStyles, templateStyles } from "./data-grid-row.styles.js";
 import { DataGridRowAnatomy, template } from "./data-grid-row.template.js";
-import { DataGridRow } from "./data-grid-row.js";
 
 const defaultStyles = [componentBaseStyles, templateStyles, aestheticStyles];
 
@@ -17,7 +16,7 @@ export function composeDataGridRow(
 ): FASTElementDefinition {
     const styles = DesignSystem.assembleStyles(defaultStyles, DataGridRowAnatomy, options);
 
-    return DataGridRow.compose({
+    return FASTDataGridRow.compose({
         name: `${ds.prefix}-data-grid-row`,
         template: options?.template?.(ds) ?? template(ds),
         styles,
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 5b90000a..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,18 +5,18 @@ import {
     highlightStrokeReadableRest,
     neutralFillSubtleRest,
 } from "@adaptive-web/adaptive-ui/reference";
+import type { FASTDataGridRow } from "@microsoft/fast-foundation";
 import { heightNumber } from "../../styles/index.js";
-import { DataGridRow } from "./data-grid-row.js";
 
 /**
  * Basic layout styling associated with the anatomy of the template.
  * @public
  */
-export const templateStyles: ElementStyles = css<DataGridRow>/* CSS */`
+export const templateStyles: ElementStyles = css`
     :host {
         display: grid;
         grid-template-columns: subgrid;
-        grid-column: span ${x => x.columnDefinitions?.length ?? 1 };
+        grid-column: 1 / span all;
         grid-auto-flow: row;
         width: 100%;
     }
diff --git a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.ts b/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.ts
deleted file mode 100644
index 311b46f0..00000000
--- a/packages/adaptive-web-components/src/components/data-grid-row/data-grid-row.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { FASTDataGridRow } from '@microsoft/fast-foundation';
-
-export class DataGridRow extends FASTDataGridRow {
-    protected updateRowStyle(): void {
-        return;
-    }
-}
\ No newline at end of file
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 783af696..8cc632bf 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
@@ -10,7 +10,7 @@ export const templateStyles: ElementStyles = css<FASTDataGrid>/* CSS */`
         display: grid;
         position: relative;
         grid-auto-flow: row;
-        grid-template-columns: ${x => x.gridTemplateColumns};
+        grid-template-columns: repeat(${x => x.columnDefinitions?.length ?? 1}, 1fr);
     }
 
     :host([selection-mode="multi-row"]) {

From c8c8b85a4ec6f9728c6814257033f59828f1f910 Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Tue, 9 Jan 2024 11:27:00 -0700
Subject: [PATCH 5/5] quotes

---
 .../src/components/data-grid/data-grid.styles.ts                | 2 +-
 .../src/components/data-grid/data-grid.template.ts              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 8cc632bf..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,5 +1,5 @@
 import { css, ElementStyles } from "@microsoft/fast-element";
-import { FASTDataGrid } from '@microsoft/fast-foundation';
+import { FASTDataGrid } from "@microsoft/fast-foundation";
 
 /**
  * Basic layout styling associated with the anatomy of the template.
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