diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts
new file mode 100644
index 0000000000..a12676647e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area/block-grid-area.element.ts
@@ -0,0 +1,39 @@
+import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../../context/block-grid-entries.context-token.js';
+import { UmbBlockGridEntriesElement } from '../block-grid-entries/index.js';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+
+/**
+ * @description
+ * This element is used to render a single block grid area.
+ */
+@customElement('umb-block-grid-area')
+export class UmbBlockGridAreasContainerElement extends UmbBlockGridEntriesElement {
+	//
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_BLOCK_GRID_ENTRIES_CONTEXT, (context) => {
+			this.observe(
+				context.layoutColumns,
+				(layoutColumns) => {
+					this.layoutColumns = layoutColumns;
+				},
+				'observeParentEntriesLayoutColumns',
+			);
+		}).skipHost();
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		// eslint-disable-next-line wc/no-self-class
+		this.classList.add('umb-block-grid__area');
+	}
+}
+
+export default UmbBlockGridAreasContainerElement;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-block-grid-area': UmbBlockGridAreasContainerElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area/index.ts
new file mode 100644
index 0000000000..c81f975a43
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area/index.ts
@@ -0,0 +1 @@
+export * from './block-grid-area.element.js';