diff --git a/lib/blocks.php b/lib/blocks.php
index b92a656513714b..5ded43de1bf731 100644
--- a/lib/blocks.php
+++ b/lib/blocks.php
@@ -53,6 +53,7 @@ function gutenberg_reregister_core_block_types() {
 				'block.php'                     => 'core/block',
 				'calendar.php'                  => 'core/calendar',
 				'categories.php'                => 'core/categories',
+				'columns.php'                   => 'core/columns',
 				'file.php'                      => 'core/file',
 				'latest-comments.php'           => 'core/latest-comments',
 				'latest-posts.php'              => 'core/latest-posts',
diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index f3bc49d3d24971..eb9acc8aeb0658 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -6,6 +6,14 @@
 	"description": "Add a block that displays content in multiple columns, then add whatever content blocks you’d like.",
 	"textdomain": "default",
 	"attributes": {
+		"gridGap": {
+			"type": "number",
+			"default": 2
+		},
+		"gridGapUnit": {
+			"type": "string",
+			"default": "em"
+		},
 		"verticalAlignment": {
 			"type": "string"
 		}
diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js
index 34b3076904a63f..b579dceef1a0e9 100644
--- a/packages/block-library/src/columns/deprecated.js
+++ b/packages/block-library/src/columns/deprecated.js
@@ -51,6 +51,8 @@ const migrateCustomColors = ( attributes ) => {
 	}
 	return {
 		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
+		gridGap: 2,
+		gridGapUnit: 'em',
 		style,
 	};
 };
@@ -166,7 +168,14 @@ export default [
 				createBlock( 'core/column', {}, columnBlocks )
 			);
 
-			return [ omit( attributes, [ 'columns' ] ), migratedInnerBlocks ];
+			return [
+				{
+					...omit( attributes, [ 'columns' ] ),
+					gridGap: 2,
+					gridGapUnit: 'em',
+				},
+				migratedInnerBlocks,
+			];
 		},
 		save( { attributes } ) {
 			const { columns } = attributes;
@@ -186,7 +195,11 @@ export default [
 			},
 		},
 		migrate( attributes, innerBlocks ) {
-			attributes = omit( attributes, [ 'columns' ] );
+			attributes = {
+				...omit( attributes, [ 'columns' ] ),
+				gridGap: 2,
+				gridGapUnit: 'em',
+			};
 
 			return [ attributes, innerBlocks ];
 		},
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 542bd32f3ae9f8..a3d29418fadae6 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -8,8 +8,13 @@ import { dropRight, get, times } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, RangeControl, Notice } from '@wordpress/components';
-
+import {
+	BaseControl,
+	Notice,
+	PanelBody,
+	RangeControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+} from '@wordpress/components';
 import {
 	InspectorControls,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
@@ -17,8 +22,12 @@ import {
 	BlockVerticalAlignmentToolbar,
 	__experimentalBlockVariationPicker,
 	useBlockProps,
+	useSetting,
+	__experimentalUnitControl as UnitControl,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useInstanceId } from '@wordpress/compose';
+import { useEffect, useState } from '@wordpress/element';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
 import {
 	createBlock,
@@ -31,6 +40,7 @@ import {
  */
 import {
 	hasExplicitPercentColumnWidths,
+	getColumnWidthsAsGridColumnsValues,
 	getMappedColumnWidths,
 	getRedistributedColumnWidths,
 	toWidthPrecision,
@@ -47,30 +57,114 @@ import {
  */
 const ALLOWED_BLOCKS = [ 'core/column' ];
 
+function GridGapInput( { onChange, onUnitChange, unit = 'px', value = '' } ) {
+	const [ temporaryInput, setTemporaryInput ] = useState( null );
+
+	const instanceId = useInstanceId( UnitControl );
+	const inputId = `block-columns-grid-gap-input-${ instanceId }`;
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'px',
+			'em',
+			'rem',
+			'vw',
+			'vh',
+		],
+		defaultValues: { px: '40', em: '2', rem: '2', vw: '5', vh: '5' },
+	} );
+
+	const handleOnChange = ( unprocessedValue ) => {
+		const inputValue =
+			unprocessedValue !== ''
+				? parseInt( unprocessedValue, 10 )
+				: undefined;
+
+		if ( isNaN( inputValue ) && inputValue !== undefined ) {
+			setTemporaryInput( unprocessedValue );
+			return;
+		}
+		setTemporaryInput( null );
+		onChange( inputValue );
+		if ( inputValue === undefined ) {
+			onUnitChange();
+		}
+	};
+
+	const handleOnBlur = () => {
+		if ( temporaryInput !== null ) {
+			setTemporaryInput( null );
+		}
+	};
+
+	const inputValue = temporaryInput !== null ? temporaryInput : value;
+	const min = 0;
+
+	return (
+		<BaseControl label={ __( 'Gap' ) } id={ inputId }>
+			<UnitControl
+				id={ inputId }
+				isResetValueOnUnitChange
+				min={ min }
+				onBlur={ handleOnBlur }
+				onChange={ handleOnChange }
+				onUnitChange={ onUnitChange }
+				step="1"
+				style={ { maxWidth: 80 } }
+				unit={ unit }
+				units={ units }
+				value={ inputValue }
+			/>
+		</BaseControl>
+	);
+}
+
 function ColumnsEditContainer( {
 	attributes,
+	clientId,
+	setAttributes,
 	updateAlignment,
 	updateColumns,
-	clientId,
 } ) {
-	const { verticalAlignment } = attributes;
+	const { gridGap, gridGapUnit, verticalAlignment } = attributes;
+
+	const [ gridTemplateColumns, setGridTemplateColumns ] = useState(
+		undefined
+	);
 
-	const { count } = useSelect(
+	const { count, innerBlocks } = useSelect(
 		( select ) => {
 			return {
 				count: select( blockEditorStore ).getBlockCount( clientId ),
+				innerBlocks: select( blockEditorStore ).getBlocks( clientId ),
 			};
 		},
 		[ clientId ]
 	);
 
+	useEffect( () => {
+		setGridTemplateColumns(
+			getColumnWidthsAsGridColumnsValues( innerBlocks )
+		);
+	}, [ count, innerBlocks ] );
+
+	const gridGapWithUnit = gridGapUnit
+		? `${ gridGap }${ gridGapUnit }`
+		: gridGap;
+
 	const classes = classnames( {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
 	const blockProps = useBlockProps( {
 		className: classes,
+		style: {
+			gap: gridGapWithUnit || undefined,
+			gridTemplateColumns,
+			counterReset: 'grid-gap-' + gridGapWithUnit || undefined, // This is a hack to enforce re-rendering in Safari when the gap value changes.
+		},
 	} );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		orientation: 'horizontal',
@@ -101,6 +195,18 @@ function ColumnsEditContainer( {
 							) }
 						</Notice>
 					) }
+					<GridGapInput
+						value={ gridGap }
+						unit={ gridGapUnit }
+						onChange={ ( newGridGap ) =>
+							setAttributes( { gridGap: newGridGap } )
+						}
+						onUnitChange={ ( nextUnit ) =>
+							setAttributes( {
+								gridGapUnit: nextUnit,
+							} )
+						}
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index e72fdabd88b572..ca5ef6fc7eb9a1 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -95,6 +95,7 @@ function ColumnsEditContainer( {
 	isSelected,
 	onDeleteBlock,
 	innerWidths,
+	setAttributes,
 	updateInnerColumnWidth,
 	editorSidebarOpened,
 } ) {
@@ -103,7 +104,12 @@ function ColumnsEditContainer( {
 	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
 	const globalStyles = useContext( GlobalStylesContext );
 
-	const { verticalAlignment, align } = attributes;
+	const {
+		verticalAlignment,
+		align,
+		gridGap,
+		gridGapUnit = 'em',
+	} = attributes;
 	const { width } = sizes || {};
 
 	const units = useCustomUnits( {
@@ -189,6 +195,14 @@ function ColumnsEditContainer( {
 		onChangeWidth( nextWidth, valueUnit, columnId );
 	};
 
+	const onGridGapChange = ( value ) => {
+		setAttributes( { gridGap: value } );
+	};
+
+	const onGridGapUnitChange = ( value ) => {
+		setAttributes( { gridGapUnit: value } );
+	};
+
 	const getColumnsSliders = useMemo( () => {
 		if ( ! editorSidebarOpened || ! isSelected ) {
 			return null;
@@ -257,6 +271,17 @@ function ColumnsEditContainer( {
 								type="stepper"
 							/>
 							{ getColumnsSliders }
+							<UnitControl
+								label={ __( 'Gap' ) }
+								min={ 0 }
+								max={ 30 }
+								unit={ gridGapUnit }
+								value={ gridGap }
+								onChange={ onGridGapChange }
+								onUnitChange={ onGridGapUnitChange }
+								units={ units }
+								key={ gridGapUnit }
+							/>
 						</PanelBody>
 						<PanelBody>
 							<FooterMessageControl
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index 76ce4d3c97c221..5605e1e70776f3 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -6,21 +6,6 @@
 	margin-right: 0;
 }
 
-// To do: remove horizontal margin override by the editor.
-@include break-small() {
-	.editor-styles-wrapper
-	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: $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;
-	}
-}
-
 // Individual columns do not have top and bottom margins on the frontend.
 // So we make the editor match that.
 // Needs specificity.
diff --git a/packages/block-library/src/columns/index.php b/packages/block-library/src/columns/index.php
new file mode 100644
index 00000000000000..f623bd3bf97b52
--- /dev/null
+++ b/packages/block-library/src/columns/index.php
@@ -0,0 +1,92 @@
+<?php
+/**
+ * Server-side rendering of the `core/columns` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Dynamically renders the `core/columns` block.
+ *
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved block content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string The columns block markup.
+ */
+function render_block_core_columns( $attributes, $content, $block ) {
+	$styles = array();
+
+	$grid_template_columns = grid_template_column_styles_for_block_core_columns( $attributes, $block );
+
+	if ( ! empty( $grid_template_columns ) ) {
+		$styles[] = esc_attr( 'grid-template-columns: ' . $grid_template_columns  . ';' );
+	}
+	if ( ! empty( $attributes['gridGap'] ) && ! empty( $attributes['gridGapUnit'] ) ) {
+		$styles[] = esc_attr( 'gap: ' . $attributes['gridGap'] . $attributes['gridGapUnit'] . ';' );
+	}
+
+	$style = implode( ' ', $styles );
+
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'style' => $style
+		)
+	);
+
+	return preg_replace(
+		'/<div.*>/',
+		'<div ' . $wrapper_attributes . '>',
+		$content,
+		1
+	);
+}
+
+/**
+ * Builds a string of inline styles for the columns block.
+ *
+ * @param  array   $attributes The block attributes.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Style HTML attribute.
+ */
+function grid_template_column_styles_for_block_core_columns( $attributes, $block ) {
+	$grid_template_columns = [];
+
+	if ( ! empty( $block->inner_blocks ) ) {
+		foreach( $block->inner_blocks as $inner_block ) {
+			// Deal with explicitly set width values for column blocks, and fall back
+			// to treating the column as 1fr if no width value is set.
+			if (
+				! empty( $inner_block->attributes['width'] ) &&
+				'0' !== $inner_block->attributes['width']
+			) {
+				// Skip converting non-percentage based widths to `fr` units.
+				if ( false === strpos( $inner_block->attributes['width'], '%' ) ) {
+					$grid_template_columns[] = $inner_block->attributes['width'];
+				} else {
+					$percentage = floatval( $inner_block->attributes['width'] );
+					$fr_value = round( ( $percentage / 100 ) * count( $block->inner_blocks ), 2 );
+					$grid_template_columns[] = $fr_value . 'fr';
+				}
+			} else {
+				$grid_template_columns[] = '1fr';
+			}
+		}
+	}
+
+	return implode( ' ', $grid_template_columns );
+}
+
+/**
+ * Registers the `core/search` block on the server.
+ */
+function register_block_core_columns() {
+	register_block_type_from_metadata(
+		__DIR__ . '/columns',
+		array(
+			'render_callback' => 'render_block_core_columns',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_columns' );
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index dc744f46eb2db6..1a49f4b28846f4 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,13 +1,13 @@
 .wp-block-columns {
-	display: flex;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 	margin-bottom: 1.75em;
 	box-sizing: border-box;
 
-	// Responsiveness: Allow wrapping on mobile.
-	flex-wrap: wrap;
-
-	@include break-medium() {
-		flex-wrap: nowrap;
+	// In viewports smaller than large, try to show 2 columns,
+	// reducing to a single column in smaller containers.
+	@media (max-width: #{ ($break-medium - 1) }) {
+		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
 	}
 
 	&.has-background {
@@ -31,13 +31,6 @@
 }
 
 .wp-block-column {
-	flex-grow: 1;
-
-	@media (max-width: #{ ($break-small - 1) }) {
-		// Responsiveness: Show at most one columns on mobile. This must be
-		// important since the Column assigns its own width as an inline style.
-		flex-basis: 100% !important;
-	}
 
 	// Prevent the columns from growing wider than their distributed sizes.
 	min-width: 0;
@@ -46,48 +39,6 @@
 	word-break: break-word; // For back-compat.
 	overflow-wrap: break-word; // New standard.
 
-	// Between mobile and large viewports, allow 2 columns.
-	@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
-		// Only add two column styling if there are two or more columns
-		&:not(:only-child) {
-			// As with mobile styles, this must be important since the Column
-			// assigns its own width as an inline style, which should take effect
-			// starting at `break-medium`.
-			flex-basis: calc(50% - 1em) !important;
-			flex-grow: 0;
-		}
-
-		// 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;
-		}
-	}
-
-	// At large viewports, show all columns horizontally.
-	@include break-medium() {
-		// Available space should be divided equally amongst columns without an
-		// assigned width. This is achieved by assigning a flex basis that is
-		// consistent (equal), would not cause the sum total of column widths to
-		// exceed 100%, and which would cede to a column with an assigned width.
-		// The `flex-grow` allows columns to maximally and equally occupy space
-		// remaining after subtracting the space occupied by columns with
-		// explicit widths (if any exist).
-		flex-basis: 0;
-		flex-grow: 1;
-
-		// Columns with an explicitly-assigned width should maintain their
-		// `flex-basis` width and not grow.
-		&[style*="flex-basis"] {
-			flex-grow: 0;
-		}
-
-		// When columns are in a single row, add space before all except the first.
-		&:not(:first-child) {
-			margin-left: 2em;
-		}
-	}
-
 	/**
 	* Individual Column Alignment
 	*/
diff --git a/packages/block-library/src/columns/test/utils.js b/packages/block-library/src/columns/test/utils.js
index 5d266a3b001f40..000dc0f1c63700 100644
--- a/packages/block-library/src/columns/test/utils.js
+++ b/packages/block-library/src/columns/test/utils.js
@@ -3,6 +3,7 @@
  */
 import {
 	toWidthPrecision,
+	getColumnWidthsAsGridColumnsValues,
 	getEffectiveColumnWidth,
 	getTotalColumnsWidth,
 	getColumnWidths,
@@ -281,3 +282,69 @@ describe( 'getMappedColumnWidths', () => {
 		] );
 	} );
 } );
+
+describe( 'getColumnWidthsAsGridColumnsValues', () => {
+	it( 'returns equal widths when no width attributes are used', () => {
+		const blocks = [
+			{ clientId: 'a', attributes: {} },
+			{ clientId: 'b', attributes: {} },
+			{ clientId: 'c', attributes: {} },
+		];
+
+		const result = getColumnWidthsAsGridColumnsValues( blocks );
+
+		expect( result ).toEqual( '1fr 1fr 1fr' );
+	} );
+
+	it( 'should round percentages to nearest fr unit', () => {
+		const blocks = [
+			{ clientId: 'a', attributes: { width: '33.33%' } },
+			{ clientId: 'b', attributes: { width: '33.33%' } },
+			{ clientId: 'c', attributes: { width: '33.33%' } },
+		];
+
+		const result = getColumnWidthsAsGridColumnsValues( blocks );
+
+		expect( result ).toEqual( '1fr 1fr 1fr' );
+	} );
+
+	it( 'should calculate fr units correctly from width attributes', () => {
+		const blocks = [
+			{ clientId: 'a', attributes: { width: '60%' } },
+			{ clientId: 'b', attributes: { width: '20%' } },
+			{ clientId: 'c', attributes: { width: '20%' } },
+		];
+
+		const result = getColumnWidthsAsGridColumnsValues( blocks );
+
+		expect( result ).toEqual( '1.8fr 0.6fr 0.6fr' );
+	} );
+
+	it( 'returns an empty string when called with an empty array', () => {
+		const result = getColumnWidthsAsGridColumnsValues( [] );
+		expect( result ).toBe( '' );
+	} );
+
+	it( 'should treat 0 or empty widths as though no custom width is specified', () => {
+		const blocks = [
+			{ clientId: 'a', attributes: { width: '0' } },
+			{ clientId: 'b', attributes: { width: '' } },
+			{ clientId: 'c', attributes: { width: '33.33%' } },
+		];
+
+		const result = getColumnWidthsAsGridColumnsValues( blocks );
+		expect( result ).toBe( '1fr 1fr 1fr' );
+	} );
+
+	it( 'should skip converting non-percentage values to fr units', () => {
+		const blocks = [
+			{ clientId: 'a', attributes: { width: '50px' } },
+			{ clientId: 'b', attributes: { width: '4em' } },
+			{ clientId: 'b', attributes: { width: '4rem' } },
+			{ clientId: 'c', attributes: { width: '25%' } },
+		];
+
+		const result = getColumnWidthsAsGridColumnsValues( blocks );
+		expect( result ).toBe( '50px 4em 4rem 1fr' );
+	} );
+} );
diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js
index c99b4e504b07fa..775a7161e2bfb0 100644
--- a/packages/block-library/src/columns/utils.js
+++ b/packages/block-library/src/columns/utils.js
@@ -173,3 +173,37 @@ export function getWidthWithUnit( width, unit ) {
 export function isPercentageUnit( unit ) {
 	return unit === '%';
 }
+
+/**
+ * Returns a string of fr units representing the widths of each column in innerBlocks,
+ * to be used in the CSS attribute `grid-template-columns`. Non-percentage based units
+ * (e.g. px, em, rem) skip conversion to `fr` units.
+ *
+ * @param {WPBlock[]} blocks	Block objects.
+ *
+ * @return {string} A string of fr units to be used in the gridTemplateColumns attribute.
+ */
+export function getColumnWidthsAsGridColumnsValues( blocks ) {
+	let fractionsString = '';
+
+	blocks.forEach( ( block ) => {
+		// If width exists, isn't empty or zero, and doesn't use percentage units,
+		// then use the value directly to support px, em, rem widths.
+		if (
+			block.attributes?.width &&
+			typeof block.attributes.width === 'string' &&
+			block.attributes.width !== '0' &&
+			! block.attributes.width.includes( '%' )
+		) {
+			fractionsString += block.attributes?.width + ' ';
+		} else {
+			const colWidth = getEffectiveColumnWidth( block, blocks.length );
+			const frWidth = colWidth
+				? toWidthPrecision( ( colWidth / 100 ) * blocks.length )
+				: 1;
+			fractionsString += frWidth + 'fr ';
+		}
+	} );
+
+	return fractionsString.trim();
+}
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.html b/packages/e2e-tests/fixtures/blocks/core__columns.html
index 89383b93f3ad15..6da3648e484326 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.html
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.html
@@ -1,5 +1,5 @@
-<!-- wp:columns {"backgroundColor":"secondary"} -->
-<div class="wp-block-columns has-background has-secondary-background-color">
+<!-- wp:columns {"gridGap":10,"gridGapUnit":"px"} -->
+<div class="wp-block-columns">
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:paragraph -->
@@ -13,10 +13,7 @@
 	<!-- wp:column -->
 	<div class="wp-block-column">
 		<!-- wp:paragraph -->
-		<p>Column Two, Paragraph One</p>
-		<!-- /wp:paragraph -->
-		<!-- wp:paragraph -->
-		<p>Column Three, Paragraph One</p>
+		<p>Column Two, Paragraph Two</p>
 		<!-- /wp:paragraph -->
 	</div>
 	<!-- /wp:column -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.json b/packages/e2e-tests/fixtures/blocks/core__columns.json
index b6e16b848abffa..10e9ca36dd95ed 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.json
@@ -4,7 +4,8 @@
 		"name": "core/columns",
 		"isValid": true,
 		"attributes": {
-			"backgroundColor": "secondary"
+			"gridGap": 10,
+			"gridGapUnit": "px"
 		},
 		"innerBlocks": [
 			{
@@ -49,27 +50,16 @@
 						"name": "core/paragraph",
 						"isValid": true,
 						"attributes": {
-							"content": "Column Two, Paragraph One",
+							"content": "Column Two, Paragraph Two",
 							"dropCap": false
 						},
 						"innerBlocks": [],
-						"originalContent": "<p>Column Two, Paragraph One</p>"
-					},
-					{
-						"clientId": "_clientId_1",
-						"name": "core/paragraph",
-						"isValid": true,
-						"attributes": {
-							"content": "Column Three, Paragraph One",
-							"dropCap": false
-						},
-						"innerBlocks": [],
-						"originalContent": "<p>Column Three, Paragraph One</p>"
+						"originalContent": "<p>Column Two, Paragraph Two</p>"
 					}
 				],
-				"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+				"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t</div>"
 			}
 		],
-		"originalContent": "<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>"
+		"originalContent": "<div class=\"wp-block-columns\">\n\t\n\t\n</div>"
 	}
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
index 64699b5f350bfe..d9f6f76aa3efa8 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.parsed.json
@@ -2,7 +2,8 @@
 	{
 		"blockName": "core/columns",
 		"attrs": {
-			"backgroundColor": "secondary"
+			"gridGap": 10,
+			"gridGapUnit": "px"
 		},
 		"innerBlocks": [
 			{
@@ -45,34 +46,23 @@
 						"blockName": "core/paragraph",
 						"attrs": {},
 						"innerBlocks": [],
-						"innerHTML": "\n\t\t<p>Column Two, Paragraph One</p>\n\t\t",
+						"innerHTML": "\n\t\t<p>Column Two, Paragraph Two</p>\n\t\t",
 						"innerContent": [
-							"\n\t\t<p>Column Two, Paragraph One</p>\n\t\t"
-						]
-					},
-					{
-						"blockName": "core/paragraph",
-						"attrs": {},
-						"innerBlocks": [],
-						"innerHTML": "\n\t\t<p>Column Three, Paragraph One</p>\n\t\t",
-						"innerContent": [
-							"\n\t\t<p>Column Three, Paragraph One</p>\n\t\t"
+							"\n\t\t<p>Column Two, Paragraph Two</p>\n\t\t"
 						]
 					}
 				],
-				"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+				"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t</div>\n\t",
 				"innerContent": [
 					"\n\t<div class=\"wp-block-column\">\n\t\t",
 					null,
-					"\n\t\t",
-					null,
 					"\n\t</div>\n\t"
 				]
 			}
 		],
-		"innerHTML": "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>\n",
+		"innerHTML": "\n<div class=\"wp-block-columns\">\n\t\n\t\n</div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t",
+			"\n<div class=\"wp-block-columns\">\n\t",
 			null,
 			"\n\t",
 			null,
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
index 2b95373d1a7b83..c91442b4e675f9 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__columns.serialized.html
@@ -1,5 +1,5 @@
-<!-- wp:columns {"backgroundColor":"secondary"} -->
-<div class="wp-block-columns has-secondary-background-color has-background"><!-- wp:column -->
+<!-- wp:columns {"gridGap":10,"gridGapUnit":"px"} -->
+<div class="wp-block-columns"><!-- wp:column -->
 <div class="wp-block-column"><!-- wp:paragraph -->
 <p>Column One, Paragraph One</p>
 <!-- /wp:paragraph -->
@@ -11,11 +11,7 @@
 
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:paragraph -->
-<p>Column Two, Paragraph One</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>Column Three, Paragraph One</p>
+<p>Column Two, Paragraph Two</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.html b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.html
similarity index 100%
rename from packages/e2e-tests/fixtures/blocks/core__columns__deprecated.html
rename to packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.html
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.json
similarity index 97%
rename from packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json
rename to packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.json
index ab71d35d661776..fd66cff733c88d 100644
--- a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.json
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.json
@@ -3,7 +3,10 @@
 		"clientId": "_clientId_0",
 		"name": "core/columns",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"gridGap": 2,
+			"gridGapUnit": "em"
+		},
 		"innerBlocks": [
 			{
 				"clientId": "_clientId_0",
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.parsed.json
similarity index 100%
rename from packages/e2e-tests/fixtures/blocks/core__columns__deprecated.parsed.json
rename to packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.parsed.json
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.serialized.html
similarity index 100%
rename from packages/e2e-tests/fixtures/blocks/core__columns__deprecated.serialized.html
rename to packages/e2e-tests/fixtures/blocks/core__columns__deprecated-1.serialized.html
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.html b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.html
new file mode 100644
index 00000000000000..89383b93f3ad15
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.html
@@ -0,0 +1,24 @@
+<!-- wp:columns {"backgroundColor":"secondary"} -->
+<div class="wp-block-columns has-background has-secondary-background-color">
+	<!-- wp:column -->
+	<div class="wp-block-column">
+		<!-- wp:paragraph -->
+		<p>Column One, Paragraph One</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:paragraph -->
+		<p>Column One, Paragraph Two</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:column -->
+	<!-- wp:column -->
+	<div class="wp-block-column">
+		<!-- wp:paragraph -->
+		<p>Column Two, Paragraph One</p>
+		<!-- /wp:paragraph -->
+		<!-- wp:paragraph -->
+		<p>Column Three, Paragraph One</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:column -->
+</div>
+<!-- /wp:columns -->
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.json
new file mode 100644
index 00000000000000..b8d7cfbdbdac33
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.json
@@ -0,0 +1,77 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/columns",
+		"isValid": true,
+		"attributes": {
+			"gridGap": 2,
+			"gridGapUnit": "em",
+			"backgroundColor": "secondary"
+		},
+		"innerBlocks": [
+			{
+				"clientId": "_clientId_0",
+				"name": "core/column",
+				"isValid": true,
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"clientId": "_clientId_0",
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "Column One, Paragraph One",
+							"dropCap": false
+						},
+						"innerBlocks": [],
+						"originalContent": "<p>Column One, Paragraph One</p>"
+					},
+					{
+						"clientId": "_clientId_1",
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "Column One, Paragraph Two",
+							"dropCap": false
+						},
+						"innerBlocks": [],
+						"originalContent": "<p>Column One, Paragraph Two</p>"
+					}
+				],
+				"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+			},
+			{
+				"clientId": "_clientId_1",
+				"name": "core/column",
+				"isValid": true,
+				"attributes": {},
+				"innerBlocks": [
+					{
+						"clientId": "_clientId_0",
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "Column Two, Paragraph One",
+							"dropCap": false
+						},
+						"innerBlocks": [],
+						"originalContent": "<p>Column Two, Paragraph One</p>"
+					},
+					{
+						"clientId": "_clientId_1",
+						"name": "core/paragraph",
+						"isValid": true,
+						"attributes": {
+							"content": "Column Three, Paragraph One",
+							"dropCap": false
+						},
+						"innerBlocks": [],
+						"originalContent": "<p>Column Three, Paragraph One</p>"
+					}
+				],
+				"originalContent": "<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>"
+			}
+		],
+		"originalContent": "<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>"
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.parsed.json b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.parsed.json
new file mode 100644
index 00000000000000..64699b5f350bfe
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.parsed.json
@@ -0,0 +1,82 @@
+[
+	{
+		"blockName": "core/columns",
+		"attrs": {
+			"backgroundColor": "secondary"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/column",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/paragraph",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "\n\t\t<p>Column One, Paragraph One</p>\n\t\t",
+						"innerContent": [
+							"\n\t\t<p>Column One, Paragraph One</p>\n\t\t"
+						]
+					},
+					{
+						"blockName": "core/paragraph",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "\n\t\t<p>Column One, Paragraph Two</p>\n\t\t",
+						"innerContent": [
+							"\n\t\t<p>Column One, Paragraph Two</p>\n\t\t"
+						]
+					}
+				],
+				"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-column\">\n\t\t",
+					null,
+					"\n\t\t",
+					null,
+					"\n\t</div>\n\t"
+				]
+			},
+			{
+				"blockName": "core/column",
+				"attrs": {},
+				"innerBlocks": [
+					{
+						"blockName": "core/paragraph",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "\n\t\t<p>Column Two, Paragraph One</p>\n\t\t",
+						"innerContent": [
+							"\n\t\t<p>Column Two, Paragraph One</p>\n\t\t"
+						]
+					},
+					{
+						"blockName": "core/paragraph",
+						"attrs": {},
+						"innerBlocks": [],
+						"innerHTML": "\n\t\t<p>Column Three, Paragraph One</p>\n\t\t",
+						"innerContent": [
+							"\n\t\t<p>Column Three, Paragraph One</p>\n\t\t"
+						]
+					}
+				],
+				"innerHTML": "\n\t<div class=\"wp-block-column\">\n\t\t\n\t\t\n\t</div>\n\t",
+				"innerContent": [
+					"\n\t<div class=\"wp-block-column\">\n\t\t",
+					null,
+					"\n\t\t",
+					null,
+					"\n\t</div>\n\t"
+				]
+			}
+		],
+		"innerHTML": "\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t\n\t\n</div>\n",
+		"innerContent": [
+			"\n<div class=\"wp-block-columns has-background has-secondary-background-color\">\n\t",
+			null,
+			"\n\t",
+			null,
+			"\n</div>\n"
+		]
+	}
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.serialized.html b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.serialized.html
new file mode 100644
index 00000000000000..2b95373d1a7b83
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__columns__deprecated-2.serialized.html
@@ -0,0 +1,21 @@
+<!-- wp:columns {"backgroundColor":"secondary"} -->
+<div class="wp-block-columns has-secondary-background-color has-background"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph -->
+<p>Column One, Paragraph One</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Column One, Paragraph Two</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:paragraph -->
+<p>Column Two, Paragraph One</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Column Three, Paragraph One</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->