diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
index 37e7a12c40..ed8897e43e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-advanced.element.ts
@@ -50,17 +50,12 @@ export class UmbBlockTypeGridWorkspaceViewAdvancedElement extends UmbLitElement
 		UmbTextStyles,
 		css`
 			:host {
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: space-between;
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
 				gap: var(--uui-size-layout-1);
 				margin: var(--uui-size-layout-1);
 				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
 			}
-			uui-box {
-				flex: 1;
-				min-width: 600px;
-			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
index afe8afb020..91c9f24c74 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts
@@ -24,17 +24,12 @@ export class UmbBlockTypeGridWorkspaceViewAreasElement extends UmbLitElement imp
 		UmbTextStyles,
 		css`
 			:host {
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: space-between;
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
 				gap: var(--uui-size-layout-1);
 				margin: var(--uui-size-layout-1);
 				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
 			}
-			uui-box {
-				flex: 1;
-				min-width: 600px;
-			}
 		`,
 	];
 }
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 2fb76ff904..85a693964e 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
@@ -125,17 +125,12 @@ export class UmbBlockTypeGridWorkspaceViewSettingsElement extends UmbLitElement
 		UmbTextStyles,
 		css`
 			:host {
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: space-between;
+				display: grid;
+				grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
 				gap: var(--uui-size-layout-1);
 				margin: var(--uui-size-layout-1);
 				padding-bottom: var(--uui-size-layout-1); // To enforce some distance to the bottom of the scroll-container.
 			}
-			uui-box {
-				flex: 1;
-				min-width: 600px;
-			}
 
 			#showOptions {
 				display: flex;