diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index ebd2cbf5fdb9d..cadafcd2ef360 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -35,7 +35,7 @@
 		// Responsiveness: Allow wrapping on mobile.
 		flex-wrap: wrap;
 
-		@include break-small() {
+		@include break-medium() {
 			flex-wrap: nowrap;
 		}
 
@@ -89,7 +89,7 @@
 
 			// Beyond mobile, allow 2 columns.
 			@include break-small() {
-				flex-basis: 50%;
+				flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2}));
 				flex-grow: 0;
 			}
 
@@ -97,21 +97,15 @@
 			// This has to match the same padding applied in style.scss.
 			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 			@include break-small() {
-				&:nth-child(odd) {
-					margin-right: $grid-size-large * 2;
-				}
 				&:nth-child(even) {
-					margin-left: $grid-size-large * 2;
+					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
 				}
 			}
 
-			@include break-small() {
+			// When columns are in a single row, add space before all except the first.
+			@include break-medium() {
 				&:not(:first-child) {
-					margin-left: $grid-size-large * 2;
-				}
-
-				&:not(:last-child) {
-					margin-right: $grid-size-large * 2;
+					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
 				}
 			}
 		}
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 90c61ea5acb0f..00322b0afe799 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -10,18 +10,12 @@
 }
 
 .wp-block-column {
-	flex: 1;
+	flex-grow: 1;
 	margin-bottom: 1em;
 
 	// Responsiveness: Show at most one columns on mobile.
 	flex-basis: 100%;
 
-	// Beyond mobile, allow 2 columns.
-	@include break-small() {
-		flex-basis: 50%;
-		flex-grow: 0;
-	}
-
 	// Prevent the columns from growing wider than their distributed sizes.
 	min-width: 0;
 
@@ -29,22 +23,24 @@
 	word-break: break-word; // For back-compat.
 	overflow-wrap: break-word; // New standard.
 
-	// Add space between 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.
 	@include break-small() {
-		&:nth-child(odd) {
-			margin-right: $grid-size-large * 2;
-		}
+
+		// Beyond mobile, allow 2 columns.
+		flex-basis: calc(50% - #{$grid-size-large});
+		flex-grow: 0;
+
+		// Add space between the 2 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: $grid-size-large * 2;
 		}
+	}
+
+	@include break-medium() {
 
+		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
 			margin-left: $grid-size-large * 2;
 		}
-
-		&:not(:last-child) {
-			margin-right: $grid-size-large * 2;
-		}
 	}
 }