diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index 0cc93b718a89b..4da71db7f2212 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -3,6 +3,9 @@
 	"name": "core/columns",
 	"category": "design",
 	"attributes": {
+		"gutterSize": {
+			"type": "number"
+		},
 		"verticalAlignment": {
 			"type": "string"
 		}
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 9ad79099af20a..9608743c82fba 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -52,7 +52,7 @@ function ColumnsEditContainer( {
 	updateColumns,
 	clientId,
 } ) {
-	const { verticalAlignment } = attributes;
+	const { gutterSize, verticalAlignment } = attributes;
 
 	const { count } = useSelect(
 		( select ) => {
@@ -69,6 +69,10 @@ function ColumnsEditContainer( {
 
 	const blockProps = useBlockProps( {
 		className: classes,
+		style: {
+			'--columns-block-gutter-size':
+				gutterSize !== undefined ? `${ gutterSize }px` : undefined,
+		},
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
@@ -85,7 +89,7 @@ function ColumnsEditContainer( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody>
+				<PanelBody title={ __( 'Display settings' ) }>
 					<RangeControl
 						label={ __( 'Columns' ) }
 						value={ count }
@@ -112,7 +116,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 		/**
 		 * Update all child Column blocks with a new vertical alignment setting
 		 * based on whatever alignment is passed in. This allows change to parent
-		 * to overide anything set on a individual column basis.
+		 * to override anything set on a individual column basis.
 		 *
 		 * @param {string} verticalAlignment the vertical alignment setting
 		 */
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 76ce4d3c97c22..c0717f4248b49 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -10,14 +10,14 @@
 @include break-small() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: $grid-unit-20 * 2;
+		margin-left: var(--columns-block-gutter-size, $grid-unit-20 * 2);
 	}
 }
 
 @include break-medium() {
 	.editor-styles-wrapper
 	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: $grid-unit-20 * 2;
+		margin-left: var(--columns-block-gutter-size, $grid-unit-20 * 2);
 	}
 }
 
diff --git a/packages/block-library/src/columns/save.js b/packages/block-library/src/columns/save.js
index a9826c1008989..a02eb058793c2 100644
--- a/packages/block-library/src/columns/save.js
+++ b/packages/block-library/src/columns/save.js
@@ -9,14 +9,19 @@ import classnames from 'classnames';
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { verticalAlignment } = attributes;
-
-	const className = classnames( {
-		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
-	} );
+	const { gutterSize, verticalAlignment } = attributes;
+	const blockProps = {
+		className: classnames( {
+			[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+		} ),
+		style: {
+			'--columns-block-gutter-size':
+				gutterSize !== undefined ? `${ gutterSize }px` : undefined,
+		},
+	};
 
 	return (
-		<div { ...useBlockProps.save( { className } ) }>
+		<div { ...useBlockProps.save( blockProps ) }>
 			<InnerBlocks.Content />
 		</div>
 	);
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 385d5ad26282c..089634a58e283 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,6 +1,7 @@
 .wp-block-columns {
 	display: flex;
 	margin-bottom: 1.75em;
+	--columns-block-gutter-size: #{ $grid-unit-20 * 2 };
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;
@@ -59,7 +60,7 @@
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 		&:nth-child(even) {
-			margin-left: 2em;
+			margin-left: var(--columns-block-gutter-size, 2em);
 		}
 	}
 
@@ -83,7 +84,7 @@
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
-			margin-left: 2em;
+			margin-left: var(--columns-block-gutter-size, 2em);
 		}
 	}