From 1c4b89455209e558e395dd70dfbb7341b296e74c Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 10 Jun 2024 09:25:43 -0400
Subject: [PATCH] Color Variations: Use Grid rather than VStack (#62445)

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
---
 .../global-styles/variations/variations-color.js         | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
index 2b3758e92a512..88361afcc58f8 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-color.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalVStack as VStack } from '@wordpress/components';
+import {
+	__experimentalVStack as VStack,
+	__experimentalGrid as Grid,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -22,13 +25,13 @@ export default function ColorVariations( { title, gap = 2 } ) {
 	return (
 		<VStack spacing={ 3 }>
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<VStack spacing={ gap }>
+			<Grid spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
 					<Variation key={ index } variation={ variation } isPill>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }
-			</VStack>
+			</Grid>
 		</VStack>
 	);
 }