diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts
index 5703f64665..b13582061a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-column-span/property-editor-ui-block-grid-column-span.element.ts
@@ -1,4 +1,4 @@
-import { html, customElement, property, css, state } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement, property, css, state, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -14,13 +14,13 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement
 	value: Array<BlockGridColumn> = [];
 
 	@state()
-	private _maxColumns = 12;
+	private _columnsArray = Array.from(Array(12).keys());
 
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		const maxColumns = config?.getValueByAlias('gridColumns');
+		const maxColumns = config?.getValueByAlias('maxColumns');
 		if (typeof maxColumns === 'number') {
-			this._maxColumns = maxColumns;
+			this._columnsArray = Array.from(Array(maxColumns).keys());
 		}
 	}
 
@@ -38,21 +38,25 @@ export class UmbPropertyEditorUIBlockGridColumnSpanElement extends UmbLitElement
 	}
 
 	render() {
-		const template = Array.from({ length: this._maxColumns }, (_, index) => {
-			const number = index + 1;
-			let classes = 'default';
+		const template = repeat(
+			this._columnsArray,
+			(index) => index,
+			(index) => {
+				const number = index + 1;
+				let classes = 'default';
 
-			if (this.value && this.value.length > 0) {
-				const applied = this.value.find((column) => column.columnSpan >= index);
-				const picked = this.value.find((column) => column.columnSpan === index);
-				classes = picked ? 'picked applied' : applied ? 'applied' : 'default';
-			}
+				if (this.value && this.value.length > 0) {
+					const applied = this.value.find((column) => column.columnSpan >= index);
+					const picked = this.value.find((column) => column.columnSpan === index);
+					classes = picked ? 'picked applied' : applied ? 'applied' : 'default';
+				}
 
-			return html`<div class="${classes}" data-index=${index}>
-				<span>${number}</span>
-				<button type="button" aria-label=${number} @click=${() => this.#pickColumn(index)}></button>
-			</div>`;
-		});
+				return html`<div class="${classes}" data-index=${index}>
+					<span>${number}</span>
+					<button type="button" aria-label=${number} @click=${() => this.#pickColumn(index)}></button>
+				</div>`;
+			},
+		);
 
 		return html`<div id="wrapper">${template}</div>`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
index c771d967f0..eff0dc21e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-settings.element.ts
@@ -4,6 +4,7 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
 import { UmbInputNumberRangeElement } from '@umbraco-cms/backoffice/components';
+import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/data-type';
 
 @customElement('umb-block-grid-type-workspace-view')
 export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -18,6 +19,9 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
 	@state()
 	private _rowMaxSpan?: number;
 
+	@state()
+	private _dataTypeGridColumns?: number;
+
 	#datasetContext?: typeof UMB_PROPERTY_DATASET_CONTEXT.TYPE;
 
 	#onRowSpanChange(e: CustomEvent) {
@@ -27,6 +31,15 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
 
 	constructor() {
 		super();
+		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (context) => {
+			this.observe(
+				await context.propertyValueByAlias<undefined | string>('gridColumns'),
+				(value) => {
+					this._dataTypeGridColumns = value ? parseInt(value, 10) : undefined;
+				},
+				'observeGridColumns',
+			);
+		}).exactMatch();
 		this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (context) => {
 			this.#datasetContext = context;
 			// TODO set showSizeOption to true when rowMinSpan or rowMaxSpan is set
@@ -38,21 +51,21 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
 					}
 					this.removeControllerByAlias('_observeColumnSpanOptions');
 				},
-				'_observeColumnSpanOptions',
+				'observeColumnSpanOptions',
 			);
 			this.observe(
 				await context.propertyValueByAlias<number | undefined>('rowMinSpan'),
 				(value) => {
 					this._rowMinSpan = value;
 				},
-				'_observeRowMinSpan',
+				'observeRowMinSpan',
 			);
 			this.observe(
 				await context.propertyValueByAlias<number | undefined>('rowMaxSpan'),
 				(value) => {
 					this._rowMaxSpan = value;
 				},
-				'_observeRowMaxSpan',
+				'observeRowMaxSpan',
 			);
 		});
 	}
@@ -102,7 +115,14 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
 			return html`<umb-property
 					label=${this.localize.term('blockEditor_allowedBlockColumns')}
 					alias="columnSpanOptions"
-					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridColumnSpan"></umb-property>
+					property-editor-ui-alias="Umb.PropertyEditorUi.BlockGridColumnSpan"
+					data-test-attr="${this._dataTypeGridColumns + ' '}"
+					.config=${[
+						{
+							alias: 'maxColumns',
+							value: this._dataTypeGridColumns,
+						},
+					]}></umb-property>
 				<umb-property-layout label=${this.localize.term('blockEditor_allowedBlockRows')}>
 					<umb-input-number-range
 						slot="editor"