diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 542bd32f3ae9f8..0f77c3f843dbe8 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -170,7 +170,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 					...getMappedColumnWidths( innerBlocks, widths ),
 					...times( newColumns - previousColumns, () => {
 						return createBlock( 'core/column', {
-							width: newColumnWidth,
+							width: `${ newColumnWidth }%`,
 						} );
 					} ),
 				];
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index e72fdabd88b572..0df352b94e1a5a 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -381,7 +381,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 					...getMappedColumnWidths( innerBlocks, widths ),
 					...times( newColumns - previousColumns, () => {
 						return createBlock( 'core/column', {
-							width: newColumnWidth,
+							width: `${ newColumnWidth }%`,
 							verticalAlignment,
 						} );
 					} ),
diff --git a/packages/block-library/src/columns/test/utils.js b/packages/block-library/src/columns/test/utils.js
index 5d266a3b001f40..d99a7b3d4a6205 100644
--- a/packages/block-library/src/columns/test/utils.js
+++ b/packages/block-library/src/columns/test/utils.js
@@ -276,8 +276,8 @@ describe( 'getMappedColumnWidths', () => {
 		const result = getMappedColumnWidths( blocks, widths );
 
 		expect( result ).toEqual( [
-			{ clientId: 'a', attributes: { width: 25 } },
-			{ clientId: 'b', attributes: { width: 35 } },
+			{ clientId: 'a', attributes: { width: '25%' } },
+			{ clientId: 'b', attributes: { width: '35%' } },
 		] );
 	} );
 } );
diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js
index c99b4e504b07fa..8ffd5331bc0c93 100644
--- a/packages/block-library/src/columns/utils.js
+++ b/packages/block-library/src/columns/utils.js
@@ -122,7 +122,7 @@ export function getMappedColumnWidths( blocks, widths ) {
 	return blocks.map( ( block ) =>
 		merge( {}, block, {
 			attributes: {
-				width: widths[ block.clientId ],
+				width: `${ widths[ block.clientId ] }%`,
 			},
 		} )
 	);