diff --git a/packages/block-editor/src/components/colors-gradients/style.scss b/packages/block-editor/src/components/colors-gradients/style.scss
index c3070aa53106b2..cf72b32b43f86d 100644
--- a/packages/block-editor/src/components/colors-gradients/style.scss
+++ b/packages/block-editor/src/components/colors-gradients/style.scss
@@ -23,25 +23,14 @@
 	// @wordpress/components/src/circular-option-picker/style.scss
 	$swatch-size: 28px;
 
-	// Optimize fit of six swatches per line using calc() to create variable
-	// spacing that mimics a "justified/space-between" layout and works with
-	// or without scrollbars
 	@media screen and (min-width: $break-medium) {
-		// Overrides the default negative margin
 		.components-circular-option-picker__swatches {
-			margin-right: 0;
-		}
-		// Figures the spacing
-		.components-circular-option-picker__option-wrapper {
-			margin-right: calc((100% - (#{$swatch-size} * 6)) / 5);
-		}
-		// Removes the right margin on every sixth swatch
-		.components-circular-option-picker__option-wrapper:nth-child(6n + 6) {
-			margin-right: 0;
+			display: grid;
+			grid-template-columns: repeat(6, $swatch-size);
+			justify-content: space-between;
 		}
 	}
 
-
 	// This shouldn't be needed but there's a rule in the inspector controls
 	// overriding this causing too much spacing.
 	// That generic rule should ideally be removed.
diff --git a/packages/components/src/circular-option-picker/style.scss b/packages/components/src/circular-option-picker/style.scss
index 49bd4a34298f40..8b764cccfb8ec7 100644
--- a/packages/components/src/circular-option-picker/style.scss
+++ b/packages/components/src/circular-option-picker/style.scss
@@ -11,10 +11,10 @@ $color-palette-circle-spacing: 12px;
 		justify-content: flex-end;
 	}
 
-	// Effectively negates the end swatch spacing to keep the swatches
-	// from wrapping before necessary.
 	.components-circular-option-picker__swatches {
-		margin-right: -$color-palette-circle-spacing;
+		display: flex;
+		flex-wrap: wrap;
+		gap: $color-palette-circle-spacing;
 	}
 }
 
@@ -22,8 +22,6 @@ $color-palette-circle-spacing: 12px;
 	display: inline-block;
 	height: $color-palette-circle-size;
 	width: $color-palette-circle-size;
-	margin-right: $color-palette-circle-spacing;
-	margin-bottom: $color-palette-circle-spacing;
 	vertical-align: top;
 	transform: scale(1);
 	transition: 100ms transform ease;