diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
index 60e0c4e96a..4765c9c45e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blockgrid/umbraco-blockgridlayout.css
@@ -29,7 +29,7 @@
 .umb-block-grid__area {
     position: relative;
     /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
-    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
+    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
     grid-row: span var(--umb-block-grid--area-row-span, 1);
 }
 
@@ -38,6 +38,6 @@
         grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
     }
     .umb-block-grid__area {
-        grid-column-end: span var(--umb-block-grid--area-column-span, 1);
+        grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
     }
 }
\ No newline at end of file