diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 363ab1fea..1c5e351d6 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -77,6 +77,7 @@ declare module 'vue' {
     Files: typeof import('./src/components/Icons/Files.vue')['default']
     FitScreen: typeof import('./src/components/Icons/FitScreen.vue')['default']
     FontUploader: typeof import('./src/components/Controls/FontUploader.vue')['default']
+    GapControl: typeof import('./src/components/GapControl.vue')['default']
     GlobalAI: typeof import('./src/components/Settings/GlobalAI.vue')['default']
     GlobalAnalytics: typeof import('./src/components/Settings/GlobalAnalytics.vue')['default']
     GlobalCode: typeof import('./src/components/Settings/GlobalCode.vue')['default']
@@ -141,6 +142,7 @@ declare module 'vue' {
     SpacingControl: typeof import('./src/components/SpacingControl.vue')['default']
     SplitInput: typeof import('./src/components/Controls/SplitInput.vue')['default']
     SplitModeInput: typeof import('./src/components/Controls/SplitModeInput.vue')['default']
+    SplitPropertyControl: typeof import('./src/components/Controls/SplitPropertyControl.vue')['default']
     StringOptions: typeof import('./src/components/PropsOptions/StringOptions.vue')['default']
     StylePropertyControl: typeof import('./src/components/Controls/StylePropertyControl.vue')['default']
     TabButtons: typeof import('./src/components/Controls/TabButtons.vue')['default']
diff --git a/frontend/src/components/BlockFlexLayoutHandler.vue b/frontend/src/components/BlockFlexLayoutHandler.vue
index 4823d86d7..dee649fc2 100644
--- a/frontend/src/components/BlockFlexLayoutHandler.vue
+++ b/frontend/src/components/BlockFlexLayoutHandler.vue
@@ -25,12 +25,7 @@
 			{ label: 'Space Around', value: 'space-around' },
 			{ label: 'Space Evenly', value: 'space-evenly' },
 		]" />
-	<StylePropertyControl
-		v-if="blockController.isFlex()"
-		label="Gap"
-		propertyKey="gap"
-		:enableSlider="true"
-		:unitOptions="BOX_UNIT_OPTIONS" />
+	<GapControl v-if="blockController.isFlex()" />
 	<StylePropertyControl
 		propertyKey="flexWrap"
 		:component="OptionToggle"
@@ -73,7 +68,7 @@
 <script lang="ts" setup>
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import GapControl from "@/components/GapControl.vue";
 import blockController from "@/utils/blockController";
-import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
 import PlacementControl from "./PlacementControl.vue";
 </script>
diff --git a/frontend/src/components/BlockGridLayoutHandler.vue b/frontend/src/components/BlockGridLayoutHandler.vue
index cbc62130f..3b3b5a899 100644
--- a/frontend/src/components/BlockGridLayoutHandler.vue
+++ b/frontend/src/components/BlockGridLayoutHandler.vue
@@ -48,12 +48,7 @@
 		type="text"
 		:modelValue="height"
 		@update:modelValue="setHeight" />
-	<StylePropertyControl
-		propertyKey="gap"
-		label="Gap"
-		v-if="blockController.isGrid()"
-		:enableSlider="true"
-		:unitOptions="BOX_UNIT_OPTIONS" />
+	<GapControl v-if="blockController.isGrid()" />
 	<!-- <InlineInput
 		label="Align"
 		v-if="blockController.isGrid()"
@@ -216,8 +211,9 @@
 import InlineInput from "@/components/Controls/InlineInput.vue";
 import OptionToggle from "@/components/Controls/OptionToggle.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import GapControl from "@/components/GapControl.vue";
 import blockController from "@/utils/blockController";
-import { BOX_UNIT_OPTIONS, GRID_UNIT_OPTIONS } from "@/utils/unitOptions";
+import { GRID_UNIT_OPTIONS } from "@/utils/unitOptions";
 import { computed } from "vue";
 
 const getGridType = () => {
diff --git a/frontend/src/components/BorderControl.vue b/frontend/src/components/BorderControl.vue
index a4550a177..2795904c2 100644
--- a/frontend/src/components/BorderControl.vue
+++ b/frontend/src/components/BorderControl.vue
@@ -9,23 +9,14 @@
 			:events="colorEvents" />
 
 		<!-- Border Width (with Split Mode Input) -->
-		<StylePropertyControl
+		<SplitPropertyControl
 			v-if="hasColor"
 			label="Border Width"
 			propertyKey="borderWidth"
-			:component="SplitModeInput"
 			:unitOptions="BORDER_UNIT_OPTIONS"
-			:enableStates="true"
-			:enableSlider="true"
 			:splits="SPLITS"
-			:toControlValues="toControlValues"
 			:toModelValue="toModelValue"
-			:normalizeValue="normalize"
-			:inputAttrs="{ min: 0 }"
-			:getModelValue="readValue"
-			:getVariantValue="readValue"
-			:getControlAttrs="getControlAttrs"
-			:getMergedValue="getMergedValue" />
+			:getModelValue="readValue" />
 
 		<!-- Border Style -->
 		<StylePropertyControl
@@ -42,45 +33,22 @@
 </template>
 
 <script lang="ts" setup>
-import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
 import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
 import ColorInput from "@/components/Controls/ColorInput.vue";
 import blockController from "@/utils/blockController";
-import { expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { BORDER_UNIT_OPTIONS } from "@/utils/unitOptions";
-import { computed, ref, watch } from "vue";
-
-type BoxValue = string | number | boolean | null;
+import { computed } from "vue";
 
 const SPLITS = ["T", "R", "B", "L"];
-const splitModes = ref<Record<string, boolean>>({});
 
-// Reset split modes on selection change
-watch(
-	() => blockController.getSelectedBlocks(),
-	() => {
-		splitModes.value = {};
-	}
-);
 
 const readValue = (state: string | null = null) => {
 	const key = state ? `${state}:borderWidth` : "borderWidth";
 	return String(blockController.getStyle(key) || "");
 };
 
-const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: BoxValue[]) => parts.join(" ");
-const getMergedValue = (parts: BoxValue[]) => parts[0] ?? "0px";
-
-const getControlAttrs = (variant: string | null) => {
-	const key = variant ?? "main";
-	return {
-		split: new Set(toControlValues(readValue(variant))).size > 1 || (splitModes.value[key] ?? false),
-		enableSlider: true,
-		"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
-	};
-};
+const toModelValue = (parts: StyleValue[]) => parts.join(" ");
 
 const hasColor = computed(() => {
 	return Boolean(
diff --git a/frontend/src/components/BorderRadiusControl.vue b/frontend/src/components/BorderRadiusControl.vue
index fe28563a1..f479f6852 100644
--- a/frontend/src/components/BorderRadiusControl.vue
+++ b/frontend/src/components/BorderRadiusControl.vue
@@ -1,64 +1,29 @@
 <template>
 	<div class="flex w-full flex-col gap-2">
-		<StylePropertyControl
+		<SplitPropertyControl
 			label="Radius"
 			placeholder="None"
 			propertyKey="borderRadius"
-			:component="SplitModeInput"
 			:unitOptions="RADIUS_UNIT_OPTIONS"
-			:enableStates="true"
-			:enableSlider="true"
 			:splits="SPLITS"
-			:toControlValues
-			:toModelValue
-			:normalizeValue="normalize"
-			:inputAttrs="{ min: 0 }"
 			:getModelValue="readValue"
-			:getVariantValue="readValue"
-			:getControlAttrs="getControlAttrs"
-			:getMergedValue
 			@update:modelValue="ensureRoundedContentIsClipped" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
-import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
 import blockController from "@/utils/blockController";
-import { collapseBoxShorthand, expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
 import { RADIUS_UNIT_OPTIONS } from "@/utils/unitOptions";
-import { ref, watch } from "vue";
-
-type BoxValue = string | number | boolean | null;
 
 const SPLITS = ["TL", "TR", "BR", "BL"];
 
-const splitModes = ref<Record<string, boolean>>({});
-
-watch(
-	() => blockController.getSelectedBlocks(),
-	() => (splitModes.value = {}),
-);
-
 const readValue = (state: string | null = null) =>
 	String(blockController.getStyle(state ? `${state}:borderRadius` : "borderRadius") || "");
 
-const ensureRoundedContentIsClipped = (value: BoxValue) => {
+const ensureRoundedContentIsClipped = (value: StyleValue) => {
 	if (!value) return;
 	if (!blockController.getStyle("overflowX")) blockController.setStyle("overflowX", "hidden");
 	if (!blockController.getStyle("overflowY")) blockController.setStyle("overflowY", "hidden");
 };
-
-const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: BoxValue[]) => collapseBoxShorthand(parts);
-const getMergedValue = (parts: BoxValue[]) => parts[0] ?? "0px";
-const getControlAttrs = (variant: string | null) => {
-	const key = variant ?? "main";
-	return {
-		enableSlider: true,
-		split: new Set(toControlValues(readValue(variant))).size > 1 || (splitModes.value[key] ?? false),
-		"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
-	};
-};
 </script>
diff --git a/frontend/src/components/Controls/SplitModeInput.vue b/frontend/src/components/Controls/SplitModeInput.vue
index 9b8bb47b2..c06ce0305 100644
--- a/frontend/src/components/Controls/SplitModeInput.vue
+++ b/frontend/src/components/Controls/SplitModeInput.vue
@@ -33,10 +33,11 @@
 <script lang="ts" setup>
 import Input from "@/components/Controls/Input.vue";
 import SplitInput from "@/components/Controls/SplitInput.vue";
+import blockController from "@/utils/blockController";
 import { expandBoxShorthand } from "@/utils/cssUtils";
 import { TabButtons, type TabButton } from "frappe-ui";
 import type { HTMLAttributes } from "vue";
-import { computed, useAttrs } from "vue";
+import { computed, ref, useAttrs, watch } from "vue";
 
 defineOptions({ inheritAttrs: false });
 
@@ -49,7 +50,6 @@ const props = withDefaults(
 	defineProps<{
 		modelValue?: InputValue;
 		placeholder?: string | number | boolean;
-		split?: boolean;
 		uniformTitle?: string;
 		splitTitle?: string;
 		splitOptions?: SplitOption[];
@@ -60,12 +60,11 @@ const props = withDefaults(
 		inputAttrs?: InputAttrs;
 		enableSlider?: boolean;
 		type?: string;
-		getMergedValue: (values: InputValue[]) => InputValue;
+		getMergedValue?: (values: InputValue[]) => InputValue;
 	}>(),
 	{
 		modelValue: "",
 		placeholder: "",
-		split: false,
 		uniformTitle: "Use for all",
 		splitTitle: "Set separately",
 		splits: 0,
@@ -73,13 +72,15 @@ const props = withDefaults(
 		toModelValue: (values: InputValue[]) => values,
 		normalizeValue: (value: InputValue) => value,
 		inputAttrs: () => ({}),
-		enableSlider: false,
+		// The base control filters its own enableSlider out of the fallthrough attrs, so split
+		// inputs opt in here instead.
+		enableSlider: true,
+		getMergedValue: (values: InputValue[]) => values[0] ?? "0px",
 	},
 );
 
 const emit = defineEmits<{
 	"update:modelValue": [value: InputValue];
-	"update:split": [value: boolean];
 }>();
 
 const attrs = useAttrs();
@@ -90,8 +91,17 @@ const controlAttrs = computed(() =>
 
 const splitCount = computed(() => (typeof props.splits === "number" ? props.splits : props.splits.length));
 const splitValues = computed(() => props.toControlValues(props.modelValue, splitCount.value));
+
+// Split mode turns itself on when the sides already differ; the toggle only forces it on.
+const forceSplit = ref(false);
+const split = computed(() => new Set(splitValues.value).size > 1 || forceSplit.value);
+watch(
+	() => blockController.getSelectedBlocks(),
+	() => (forceSplit.value = false),
+);
+
 const displayValue = computed(() => {
-	if (!props.split) return props.modelValue;
+	if (!split.value) return props.modelValue;
 	if (String(props.modelValue ?? "").trim() === "Mixed") return "";
 	const values = expandBoxShorthand(props.modelValue);
 	return new Set(values).size === 1 ? values[0] : "";
@@ -116,18 +126,15 @@ const resolvedSplitOptions = computed(() => props.splitOptions ?? defaultSplitOp
 
 const setSplitValue = (value: string | number | boolean | undefined) => {
 	if (typeof value !== "boolean") return;
-	if (!value) {
-		const mergedValue = props.getMergedValue(splitValues.value);
-		emit("update:modelValue", mergedValue);
-	}
-	emit("update:split", value);
+	if (!value) emit("update:modelValue", props.getMergedValue(splitValues.value));
+	forceSplit.value = value;
 };
 
 const setIndividualValue = (value: unknown) => emit("update:modelValue", value as InputValue);
 
 const setUniformValue = (value: InputValue) => {
 	if (String(value ?? "") === String(displayValue.value ?? "")) return;
-	if (props.split) emit("update:split", false);
+	forceSplit.value = false;
 	emit("update:modelValue", value);
 };
 </script>
diff --git a/frontend/src/components/Controls/SplitPropertyControl.vue b/frontend/src/components/Controls/SplitPropertyControl.vue
new file mode 100644
index 000000000..6dc2b125a
--- /dev/null
+++ b/frontend/src/components/Controls/SplitPropertyControl.vue
@@ -0,0 +1,56 @@
+<template>
+	<StylePropertyControl v-bind="{ ...splitProps, ...$attrs }" :component="SplitModeInput">
+		<template v-for="(_, name) in $slots" :key="name" #[name]="slotData">
+			<slot :name="name" v-bind="slotData || {}" />
+		</template>
+	</StylePropertyControl>
+</template>
+
+<script lang="ts" setup>
+import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
+import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import { collapseBoxShorthand, expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
+import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
+import { computed } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+type InputAttrs = Record<string, unknown>;
+type SplitConfig = string | { label?: string; attrs?: InputAttrs };
+
+const props = withDefaults(
+	defineProps<{
+		propertyKey: string;
+		splits: number | SplitConfig[];
+		unitOptions?: string[];
+		toControlValues?: (value: unknown, count: number) => StyleValue[];
+		toModelValue?: (values: StyleValue[], changedIndex: number) => unknown;
+		normalizeValue?: (value: StyleValue, index: number) => StyleValue;
+		inputAttrs?: InputAttrs;
+		// Reads the base value when called without a state, the variant value otherwise.
+		getModelValue?: (state?: string | null) => string | number | boolean;
+		getVariantValue?: (variant: string) => string | number | boolean;
+	}>(),
+	{
+		unitOptions: () => BOX_UNIT_OPTIONS,
+		toControlValues: (value: unknown) => expandBoxShorthand(value),
+		toModelValue: (values: StyleValue[]) => collapseBoxShorthand(values),
+		inputAttrs: () => ({ min: 0 }),
+	},
+);
+
+const defaultUnit = computed(() => props.unitOptions[0] ?? "px");
+
+const normalizeValue = computed(
+	() =>
+		props.normalizeValue ??
+		((value: StyleValue) => normalizeValueWithUnits(String(value || "0"), defaultUnit.value)),
+);
+
+const splitProps = computed(() => ({
+	...props,
+	enableSlider: true,
+	normalizeValue: normalizeValue.value,
+	getVariantValue: props.getVariantValue ?? props.getModelValue,
+}));
+</script>
diff --git a/frontend/src/components/GapControl.vue b/frontend/src/components/GapControl.vue
new file mode 100644
index 000000000..76ef20f64
--- /dev/null
+++ b/frontend/src/components/GapControl.vue
@@ -0,0 +1,104 @@
+<template>
+	<div class="flex w-full flex-col gap-2">
+		<SplitPropertyControl
+			propertyKey="gap"
+			label="Gap"
+			:splits="splits"
+			:toControlValues="toControlValues"
+			:toModelValue="toModelValue"
+			:getModelValue="readValue"
+			:getPlaceholder="getPlaceholder"
+			:getMergedValue="getMergedValue"
+			:splitOptions="SPLIT_OPTIONS"
+			:setModelValue="setModelValue" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
+import type Block from "@/block";
+import blockController from "@/utils/blockController";
+import { collapseGapShorthand, expandGapShorthand } from "@/utils/cssUtils";
+import { computed } from "vue";
+
+const isColumnDirection = computed(() =>
+	String(blockController.getNativeStyle("flexDirection") || blockController.getCascadingStyle("flexDirection") || "").startsWith("column"),
+);
+
+const splits = computed(() => isColumnDirection.value ? [{ label: "H" }, { label: "V" }] : [{ label: "V" }, { label: "H" }]);
+
+const getBlockGap = (block: Block): [string, string] => {
+	const [existingRow, existingColumn] = expandGapShorthand(block.getNativeStyle("gap"));
+	return [String(block.getNativeStyle("rowGap") ?? "").trim() || existingRow, String(block.getNativeStyle("columnGap") ?? "").trim() || existingColumn];
+};
+
+const getEffectiveGap = (): [string, string] => {
+	const blocks = blockController.getSelectedBlocks();
+	if (!blocks.length) return ["", ""];
+	let [row, column] = getBlockGap(blocks[0]);
+	for (let i = 1; i < blocks.length; i++) {
+		const [blockRow, blockColumn] = getBlockGap(blocks[i]);
+		if (row !== blockRow) row = "Mixed";
+		if (column !== blockColumn) column = "Mixed";
+	}
+	return [row, column];
+};
+
+const readValue = (state: string | null = null) => {
+	if (state) return String(blockController.getNativeStyle(`${state}:gap`) ?? "");
+	const [row, column] = getEffectiveGap();
+	if (row === "Mixed" || column === "Mixed") return row === "Mixed" && column === "Mixed" ? "Mixed" : collapseGapShorthand([row, column]);
+	return !row && !column ? "" : row === column ? row : collapseGapShorthand([row, column]);
+};
+
+const getPlaceholder = () => String(blockController.getCascadingStyle("gap") ?? "unset");
+
+const toControlValues = (value: unknown) => {
+	const [row, column] = typeof value === "string" && value.includes("Mixed") ? getEffectiveGap() : expandGapShorthand(value);
+	return isColumnDirection.value ? [column, row] : [row, column];
+};
+
+const toModelValue = (parts: StyleValue[], changedIndex?: number) => ({
+	type: "gap-split",
+	rowGap: isColumnDirection.value ? parts[1] : parts[0],
+	colGap: isColumnDirection.value ? parts[0] : parts[1],
+	changedAxis: changedIndex !== undefined ? ((isColumnDirection.value ? changedIndex === 0 : changedIndex === 1) ? "columnGap" : "rowGap") : null,
+});
+
+const SPLIT_OPTIONS = [
+	{ label: "Use for all", value: false, icon: "lucide-square", tooltip: "Use for all" },
+	{ label: "Set separately", value: true, icon: "lucide-layout-grid", tooltip: "Set separately" },
+];
+
+const getMergedValue = (parts: StyleValue[]) => parts.find((part) => part && String(part) !== "Mixed") ?? 0;
+
+const setModelValue = (val: unknown) => {
+	if (typeof val === "boolean") return;
+	const payload = val && typeof val === "object" && (val as any).type === "gap-split" ? (val as any) : null;
+
+	blockController.getSelectedBlocks().forEach((block) => {
+		if (payload) {
+			const [existingRow, existingColumn] = getBlockGap(block);
+			let row = (payload.changedAxis === "columnGap" ? existingRow : String(payload.rowGap ?? "").trim());
+			let column = (payload.changedAxis === "rowGap" ? existingColumn : String(payload.colGap ?? "").trim());
+			row = row === "Mixed" ? "" : row;
+			column = column === "Mixed" ? "" : column;
+
+			block.setStyle("gap", null);
+			if (row && column && row === column) {
+				block.setStyle("rowGap", null);
+				block.setStyle("columnGap", null);
+				block.setStyle("gap", row);
+			} else {
+				block.setStyle("rowGap", row || null);
+				block.setStyle("columnGap", column || null);
+			}
+		} else {
+			const value = String(val ?? "").trim();
+			block.setStyle("rowGap", null);
+			block.setStyle("columnGap", null);
+			block.setStyle("gap", value || null);
+		}
+	});
+};
+</script>
diff --git a/frontend/src/components/SpacingControl.vue b/frontend/src/components/SpacingControl.vue
index 1ebc520c3..676c22568 100644
--- a/frontend/src/components/SpacingControl.vue
+++ b/frontend/src/components/SpacingControl.vue
@@ -1,47 +1,28 @@
 <template>
 	<div class="flex w-full flex-col gap-2">
-		<StylePropertyControl
+		<SplitPropertyControl
 			:propertyKey="type"
-			:component="SplitModeInput"
 			:label="label"
-			:unitOptions="BOX_UNIT_OPTIONS"
-			:enableStates="true"
-			:enableSlider="enableSlider"
 			:splits="SPLITS"
-			:toControlValues
-			:toModelValue
-			:normalizeValue="normalize"
 			:inputAttrs="type === 'margin' ? {} : { min: 0 }"
 			:getModelValue="readValue"
-			:getPlaceholder="getPlaceholder"
-			:getVariantValue="readValue"
+			:getPlaceholder
 			:getMergedValue
-			:setModelValue
-			:getControlAttrs="getControlAttrs" />
+			:setModelValue />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import SplitModeInput from "@/components/Controls/SplitModeInput.vue";
-import StylePropertyControl from "@/components/Controls/StylePropertyControl.vue";
+import SplitPropertyControl from "@/components/Controls/SplitPropertyControl.vue";
 import blockController from "@/utils/blockController";
-import { collapseBoxShorthand, expandBoxShorthand, normalizeValueWithUnits } from "@/utils/cssUtils";
-import { BOX_UNIT_OPTIONS } from "@/utils/unitOptions";
-import { computed, ref, watch } from "vue";
+import { computed } from "vue";
 
 type SpacingType = "margin" | "padding";
-type BoxValue = string | number | boolean | null;
 
 const SPLITS = ["T", "R", "B", "L"];
-const enableSlider = true;
 
 const props = defineProps<{ type: SpacingType }>();
-const splitModes = ref<Record<string, boolean>>({});
 
-watch(
-	() => blockController.getSelectedBlocks(),
-	() => (splitModes.value = {}),
-);
 
 const label = computed(() => (props.type === "margin" ? "Margin" : "Padding"));
 
@@ -55,18 +36,7 @@ const readValue = (state: string | null = null) =>
 
 const getPlaceholder = () => String(getBaseValue(true));
 
-const toControlValues = (value: unknown) => expandBoxShorthand(value);
-const normalize = (value: BoxValue) => normalizeValueWithUnits(String(value || "0"), "px");
-const toModelValue = (parts: BoxValue[]) => collapseBoxShorthand(parts);
-const getMergedValue = (parts: BoxValue[]) => parts[0] ?? 0;
-const getControlAttrs = (variant: string | null) => {
-	const key = variant ?? "main";
-	return {
-		split: new Set(toControlValues(readValue(variant))).size > 1 || (splitModes.value[key] ?? false),
-		enableSlider,
-		"onUpdate:split": (split: boolean) => (splitModes.value[key] = split),
-	};
-};
+const getMergedValue = (parts: StyleValue[]) => parts[0] ?? 0;
 
 const setModelValue = (val: string | boolean | number) => {
 	if (typeof val == "boolean") return;
diff --git a/frontend/src/composables/useSpacingHandler.ts b/frontend/src/composables/useSpacingHandler.ts
index c34557b53..b0c4b2347 100644
--- a/frontend/src/composables/useSpacingHandler.ts
+++ b/frontend/src/composables/useSpacingHandler.ts
@@ -75,7 +75,7 @@ export function useSpacingHandler(getTargetBlock: () => Block, getBreakpoint: ()
 	// then collapse every update back into the single shorthand style.
 	const getSpacingParts = (property: SpacingProperty) => {
 		const styles = blockStyles.value;
-		const parts = expandBoxShorthand(styles[property] ?? "", "0px");
+		const parts = expandBoxShorthand(styles[property] ?? "");
 		allSides.forEach((side) => {
 			const sideValue = styles[styleKey(property, side)];
 			if (sideValue) parts[sides[side].index] = String(sideValue);
diff --git a/frontend/src/utils/cssUtils.ts b/frontend/src/utils/cssUtils.ts
index 70c47779c..5d773d223 100644
--- a/frontend/src/utils/cssUtils.ts
+++ b/frontend/src/utils/cssUtils.ts
@@ -236,7 +236,7 @@ function getBoxSpacing(
 	const cascading = opts?.cascading ?? false;
 	const baseValue = block.getStyle(type, undefined, nativeOnly, cascading);
 	const base = String(baseValue ?? (nativeOnly && !cascading ? "" : "unset"));
-	const baseParts = expandBoxShorthand(base, base);
+	const baseParts = expandBoxShorthand(base);
 	const top = block.getStyle(`${type}Top`, undefined, nativeOnly, cascading) ?? baseParts[0];
 	const right = block.getStyle(`${type}Right`, undefined, nativeOnly, cascading) ?? baseParts[1];
 	const bottom = block.getStyle(`${type}Bottom`, undefined, nativeOnly, cascading) ?? baseParts[2];
@@ -245,7 +245,12 @@ function getBoxSpacing(
 	const sRight = String(right);
 	const sBottom = String(bottom);
 	const sLeft = String(left);
-	if (sTop === baseParts[0] && sRight === baseParts[1] && sBottom === baseParts[2] && sLeft === baseParts[3]) {
+	if (
+		sTop === baseParts[0] &&
+		sRight === baseParts[1] &&
+		sBottom === baseParts[2] &&
+		sLeft === baseParts[3]
+	) {
 		return base;
 	}
 	// A side left unset while others are set falls back to an empty base; treat it as 0
@@ -293,10 +298,7 @@ function removeDefaultUnit(value: string, defaultUnit: string): string {
 		.join("");
 }
 
-/**
- * Splits a CSS value list on whitespace, ignoring whitespace inside
- * parentheses so functional values like `calc(10px + 5%)` stay intact.
- */
+// Splits on whitespace outside parentheses, so `calc(10px + 5%)` stays one part.
 function splitCssValueList(value: string): string[] {
 	const parts: string[] = [];
 	let current = "";
@@ -315,33 +317,51 @@ function splitCssValueList(value: string): string[] {
 	return parts;
 }
 
-/**
- * Expands a CSS box shorthand (margin, padding, border-radius) into its four
- * component values following the standard 1/2/3/4-value rules.
- * @param value - Shorthand value string
- * @param fallback - Value used for every side when the shorthand is empty
- * @returns Array of exactly four side values
- */
-function expandBoxShorthand(value: unknown, fallback = "0"): string[] {
-	const parts = splitCssValueList(String(value ?? "").trim());
-	if (!parts.length) return Array(4).fill(fallback);
-	if (parts.length === 1) return Array(4).fill(parts[0]);
-	if (parts.length === 2) return [parts[0], parts[1], parts[0], parts[1]];
-	if (parts.length === 3) return [parts[0], parts[1], parts[2], parts[1]];
-	return parts.slice(0, 4);
+// 2 slots for gap (row, column), 4 for the box sides (top, right, bottom, left).
+type ShorthandSlots = 2 | 4;
+
+// `a` → every slot, `a b` → [a,b,a,b], `a b c` → [a,b,c,b].
+function expandShorthand(value: unknown, slots: ShorthandSlots): string[] {
+	const parts = splitCssValueList(String(value ?? "").trim()).filter(
+		(part: string) => part !== "" && part !== "Mixed" && part !== "unset",
+	);
+	if (!parts.length) return Array(slots).fill("");
+	if (parts.length >= slots) return parts.slice(0, slots);
+	if (parts.length === 1) return Array(slots).fill(parts[0]);
+	return [parts[0], parts[1], parts[2] ?? parts[0], parts[1]];
+}
+
+// Inverse of expandShorthand: drops every trailing value that CSS can infer.
+function collapseShorthand(parts: unknown[], slots: ShorthandSlots): string {
+	const values = Array.from({ length: slots }, (_, index) => String(parts[index] ?? ""));
+	while (values.length > 2 && values[values.length - 1] === values[values.length - 3]) values.pop();
+	if (values.length === 2 && values[0] === values[1]) values.pop();
+	return values.join(" ");
+}
+
+function expandBoxShorthand(value: unknown): string[] {
+	return expandShorthand(value, 4);
 }
 
-/**
- * Collapses four side values into the shortest shorthand that expands back to them.
- * @param parts - Four side values, in the order expandBoxShorthand returns
- * @returns Shorthand value string
- */
 function collapseBoxShorthand(parts: unknown[]): string {
-	const [top, right, bottom, left] = parts.map((part) => String(part ?? ""));
-	if (top === right && top === bottom && top === left) return top;
-	if (top === bottom && right === left) return `${top} ${right}`;
-	if (right === left) return `${top} ${right} ${bottom}`;
-	return [top, right, bottom, left].join(" ");
+	return collapseShorthand(parts, 4);
+}
+
+function expandGapShorthand(value: unknown): [string, string] {
+	return expandShorthand(value, 2) as [string, string];
+}
+
+function collapseGapShorthand(parts: unknown[]): string {
+	// An unset axis has to become 0px, otherwise the pair reads as a single value.
+	const axes = parts.map((part) => {
+		const value = String(part ?? "").trim();
+		if (value !== "" && value !== "Mixed" && value !== "unset") {
+			return value;
+		} else {
+			return "0px";
+		}
+	});
+	return collapseShorthand(axes, 2);
 }
 
 /**
@@ -362,7 +382,9 @@ function normalizeValueWithUnits(value: string, defaultUnit: string): string {
 export {
 	addPxToNumber,
 	collapseBoxShorthand,
+	collapseGapShorthand,
 	expandBoxShorthand,
+	expandGapShorthand,
 	extractNumberAndUnit,
 	getBoxSpacing,
 	getNumberFromPx,