diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
index ada9bca19e2e..e4ab421f7280 100644
--- a/editor/src/components/canvas/controls/grid-controls.tsx
+++ b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -241,8 +241,8 @@ export const GridResizingControl = React.memo((props: GridResizingControlProps)
       >
         {props.axis === 'row' ? '↕' : '↔'}
         {when(
-          props.dimension.label != null,
-          <span style={{ position: 'absolute', top: 12 }}>{props.dimension.label}</span>,
+          props.dimension.areaName != null,
+          <span style={{ position: 'absolute', top: 12 }}>{props.dimension.areaName}</span>,
         )}
       </div>
       {when(
diff --git a/editor/src/components/editor/store/store-deep-equality-instances.ts b/editor/src/components/editor/store/store-deep-equality-instances.ts
index e9a2bf790014..68a7ab75d6e3 100644
--- a/editor/src/components/editor/store/store-deep-equality-instances.ts
+++ b/editor/src/components/editor/store/store-deep-equality-instances.ts
@@ -1975,7 +1975,7 @@ export const GridCSSNumberKeepDeepEquality: KeepDeepEqualityCall<GridCSSNumber>
     createCallWithTripleEquals<number>(),
     (cssNum) => cssNum.unit,
     nullableDeepEquality(createCallWithTripleEquals<GridCSSNumberUnit>()),
-    (cssNum) => cssNum.label,
+    (cssNum) => cssNum.areaName,
     nullableDeepEquality(StringKeepDeepEquality),
     gridCSSNumber,
   )
diff --git a/editor/src/components/inspector/common/css-utils.ts b/editor/src/components/inspector/common/css-utils.ts
index 53e5c7e920ec..54d87582806d 100644
--- a/editor/src/components/inspector/common/css-utils.ts
+++ b/editor/src/components/inspector/common/css-utils.ts
@@ -589,18 +589,18 @@ const GridCSSNumberUnits: Array<GridCSSNumberUnit> = [...LengthUnits, ...Resolut
 export interface GridCSSNumber {
   value: number
   unit: GridCSSNumberUnit | null
-  label: string | null
+  areaName: string | null
 }
 
 export function gridCSSNumber(
   value: number,
   unit: GridCSSNumberUnit | null,
-  label: string | null,
+  areaName: string | null,
 ): GridCSSNumber {
   return {
-    value,
-    unit,
-    label,
+    value: value,
+    unit: unit,
+    areaName: areaName,
   }
 }
 
@@ -768,9 +768,9 @@ export function printArrayCSSNumber(array: Array<GridCSSNumber>): string {
   return array
     .map((dimension) => {
       const printed = printCSSNumber(dimension, null)
-      const label = dimension.label != null ? `[${dimension.label}] ` : ''
+      const areaName = dimension.areaName != null ? `[${dimension.areaName}] ` : ''
       const value = typeof printed === 'string' ? printed : `${printed}`
-      return `${label}${value}`
+      return `${areaName}${value}`
     })
     .join(' ')
 }
@@ -850,20 +850,20 @@ export function parseToCSSGridNumber(input: unknown): Either<string, GridCSSNumb
       const match = input.match(gridCSSTemplateNumberRegex)
       if (match != null) {
         return {
-          label: match[1],
+          areaName: match[1],
           inputToParse: match[2],
         }
       }
     }
-    return { label: null, inputToParse: input }
+    return { areaName: null, inputToParse: input }
   }
-  const { label, inputToParse } = getParts()
+  const { areaName, inputToParse } = getParts()
 
   return mapEither((value) => {
     return {
       value: value.value,
       unit: value.unit as GridCSSNumberUnit | null,
-      label: label,
+      areaName: areaName,
     }
   }, parseCSSGrid(inputToParse))
 }
@@ -912,6 +912,8 @@ export function parseGridRange(input: unknown): Either<string, GridRange> {
   }
 }
 
+const reGridAreaNameBrackets = /^\[.+\]$/
+
 export function tokenizeGridTemplate(str: string): string[] {
   let tokens: string[] = []
   let parts = str.replace(/\]/g, '] ').split(/\s+/)
@@ -921,9 +923,9 @@ export function tokenizeGridTemplate(str: string): string[] {
     if (part == null) {
       break
     }
-    if (part.match(/^\[.+\]$/) != null && parts.length > 0) {
-      const withLabel = `${part} ${parts.shift()}`
-      tokens.push(withLabel)
+    if (part.match(reGridAreaNameBrackets) != null && parts.length > 0) {
+      const withAreaName = `${part} ${parts.shift()}`
+      tokens.push(withAreaName)
     } else {
       tokens.push(part)
     }