diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte
index 72121640a6..a1ce77df72 100644
--- a/packages/client/src/components/app/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -352,6 +352,9 @@
     z-index: 1;
     overflow: hidden;
     position: relative;
+
+    /* Deliberately unitless as we need to do unitless calculations in grids */
+    --grid-spacing: 4;
   }
   .component {
     display: contents;
@@ -407,7 +410,7 @@
     gap: var(--spacing-xl);
   }
   .nav.size--max {
-    padding: 10px;
+    padding: calc(var(--grid-spacing) * 2px);
   }
   .nav :global(.spectrum-Icon) {
     color: var(--navTextColor);
@@ -483,7 +486,7 @@
     padding: 32px;
   }
   .main:not(.size--max):has(.screenslot-dom > .component > .grid) {
-    padding: 22px;
+    padding: calc(32px - var(--grid-spacing) * 2px);
   }
 
   .layout--none .main {
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index f3682179c4..6df0fdd2d4 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -53,7 +53,6 @@
   .grid {
     position: relative;
     height: 400px;
-    --spacing: 8;
 
     /*
       Prevent cross-grid variable inheritance. The other variables for alignment
@@ -113,8 +112,8 @@
     overflow: auto;
     pointer-events: all;
     position: relative;
-    padding: 4px;
-    margin: 4px;
+    padding: calc(var(--grid-spacing) * 1px);
+    margin: calc(var(--grid-spacing) * 1px);
 
     /* On desktop, use desktop metadata and fall back to mobile */
     /* Position vars */
@@ -126,7 +125,8 @@
         round(
           up,
           calc(
-            (var(--spacing) * 2 + var(--default-width)) / var(--col-size) + 1
+            (var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) +
+              1
           )
         )
       )
@@ -139,7 +139,8 @@
         round(
           up,
           calc(
-            (var(--spacing) * 2 + var(--default-height)) / var(--row-size) + 1
+            (var(--grid-spacing) * 2 + var(--default-height)) / var(--row-size) +
+              1
           )
         )
       )