Try using the column-gap property to improve spacing between custom-s…

…ized buttons (WordPress#29165)

* Try a columns-gap version of the buttons spacing implementation.

* Use width instead of flex basis.

packages/block-library/src/button/style.scss

@@ -61,6 +61,34 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
+// If the browser supports column-gap, use that instead of the margins above.
+@supports ( column-gap: #{ $blocks-block__margin } ) {
+	.wp-block-buttons > .wp-block-button {
+		// Added .wp-block specificity needed to override the default button margin.
+		&.wp-block,
+		&.has-custom-width {
+			margin-right: 0;
+		}
+
+		&.wp-block-button__width-25 {
+			width: calc(25% - #{ $blocks-block__margin * 0.75 });
+		}
+
+		&.wp-block-button__width-50 {
+			width: calc(50% - #{ $blocks-block__margin * 0.5 });
+		}
+
+		&.wp-block-button__width-75 {
+			width: calc(75% - #{ $blocks-block__margin * 0.25 });
+		}
+
+		&.wp-block-button__width-100 {
+			width: auto;
+			flex-basis: 100%;
+		}
+	}
+}
+
 // the first selector is required for old buttons markup
 .wp-block-button.is-style-squared,
 .wp-block-button__link.wp-block-button.is-style-squared {

packages/block-library/src/buttons/style.scss

@@ -5,6 +5,7 @@ $blocks-block__margin: 0.5em;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
+	column-gap: $blocks-block__margin;
 
 	&.is-vertical {
 		flex-direction: column;