diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 07ba399dabceb0..f4305b3bd68541 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -248,7 +248,7 @@ Display multiple images in a rich gallery. ([Source](https://github.com/WordPres
 
 -	**Name:** core/gallery
 -	**Category:** media
--	**Supports:** align, anchor
+-	**Supports:** align, anchor, spacing (blockGap), units (em, px, rem, vh, vw)
 -	**Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, shortCodeTransforms, sizeSlug
 
 ## Group
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 5ed5f2f16ae754..998081b7bbbe9d 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -93,6 +93,12 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		if ( $has_block_gap_support ) {
 			$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
 			$style    .= "gap: $gap_style;";
+
+			/*
+			 * In some contexts a flex container's children may be need to recalculate their width
+			 * based on the current gap so this value is made available as a css var.
+			 */
+			$style .= "--wp--style--block-scoped-flex-gap: $gap_style;";
 		} else {
 			$style .= 'gap: 0.5em;';
 		}
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 092da1e036a10f..53d8e34dc9f535 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -113,6 +113,9 @@ export default {
 				${ appendSelectors( selector ) } {
 					display: flex;
 					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
+					--wp--style--block-scoped-flex-gap: ${
+						hasBlockGapStylesSupport ? blockGapValue : '0.5em'
+					}; 
 					flex-wrap: ${ flexWrap };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
index fb8db7d14c35ef..7f564ae3eac9ef 100644
--- a/packages/block-library/src/gallery/block.json
+++ b/packages/block-library/src/gallery/block.json
@@ -106,7 +106,22 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"units": [ "px", "em", "rem", "vh", "vw" ],
+		"spacing": {
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"allowEditing": false,
+			"default": {
+				"type": "flex"
+			}
+		}
 	},
 	"editorStyle": "wp-block-gallery-editor",
 	"style": "wp-block-gallery"
diff --git a/packages/block-library/src/gallery/gallery.js b/packages/block-library/src/gallery/gallery.js
index 23220553620264..0c59962548ce2b 100644
--- a/packages/block-library/src/gallery/gallery.js
+++ b/packages/block-library/src/gallery/gallery.js
@@ -70,12 +70,6 @@ export const Gallery = ( props ) => {
 		>
 			{ children }
 
-			<View
-				className="blocks-gallery-media-placeholder-wrapper"
-				onClick={ removeCaptionFocus }
-			>
-				{ mediaPlaceholder }
-			</View>
 			<RichTextVisibilityHelper
 				isHidden={ ! isSelected && RichText.isEmpty( caption ) }
 				captionFocused={ captionFocused }
@@ -91,6 +85,14 @@ export const Gallery = ( props ) => {
 					insertBlocksAfter( createBlock( 'core/paragraph' ) )
 				}
 			/>
+			{ isSelected && (
+				<View
+					className="blocks-gallery-media-placeholder-wrapper"
+					onClick={ removeCaptionFocus }
+				>
+					{ mediaPlaceholder }
+				</View>
+			) }
 		</figure>
 	);
 };
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 14c372f062e30b..42bf032fa55100 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -1,25 +1,17 @@
 // Import styles for rendering the static content of deprecated gallery versions.
 @import "./deprecated.scss";
 
+// The following is a temporary override until flex layout supports
+// an align items setting of normal.
+figure.wp-block-gallery.has-nested-images {
+	align-items: normal;
+}
 // Styles for current version of gallery block.
 .wp-block-gallery.has-nested-images {
-	display: flex;
-	flex-wrap: wrap;
 	// Need bogus :not(#individual-image) to override long :not()
 	// specificity chain on default image block on front end.
 	figure.wp-block-image:not(#individual-image) {
-		// Add space between thumbnails, and unset right most thumbnails later.
-		margin: 0 var(--gallery-block--gutter-size, #{$grid-unit-20}) var(--gallery-block--gutter-size, #{$grid-unit-20}) 0;
-
-		&:last-of-type:not(#individual-image) {
-			margin-right: 0;
-		}
-
-		width: calc(50% - (var(--gallery-block--gutter-size, #{$grid-unit-20}) / 2));
-
-		&:nth-of-type(even) {
-			margin-right: 0;
-		}
+		width: calc(50% - (var(--wp--style--scoped-block-gap, #{$grid-unit-20}) / 2));
 	}
 
 	figure.wp-block-image {
@@ -27,8 +19,6 @@
 		flex-grow: 1;
 		justify-content: center;
 		position: relative;
-		margin-top: auto;
-		margin-bottom: auto;
 		flex-direction: column;
 
 		> div,
@@ -98,11 +88,11 @@
 			margin-top: 0;
 			margin-bottom: auto;
 			img {
-				margin-bottom: var(--gallery-block--gutter-size, #{$grid-unit-20});
+				margin-bottom: var(--wp--style--scoped-block-gap, #{$grid-unit-20});
 			}
 
 			figcaption {
-				bottom: var(--gallery-block--gutter-size, #{$grid-unit-20});
+				bottom: var(--wp--style--scoped-block-gap, #{$grid-unit-20});
 			}
 		}
 	}
@@ -125,7 +115,6 @@
 	}
 
 	&.columns-1 figure.wp-block-image:not(#individual-image) {
-		margin-right: 0;
 		width: 100%;
 	}
 
@@ -133,35 +122,20 @@
 	@include break-small {
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } figure.wp-block-image:not(#individual-image) {
-				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
-				width: calc(#{math.div(100%, $i)} - (var(--gallery-block--gutter-size, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));
+				width: calc(#{math.div(100%, $i)} - (var(--wp--style--scoped-block-gap, #{$grid-unit-20}) * #{math.div($i - 1, $i)}));
 
 			}
-
-			// Prevent collapsing margin while sibling is being dragged.
-			&.columns-#{$i} figure.wp-block-image:not(#individual-image).is-dragging ~ figure.wp-block-image:not(#individual-image) {
-				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
-			}
-		}
-		// Unset the right margin on every rightmost gallery item to ensure center balance.
-		@for $column-count from 1 through 8 {
-			&.columns-#{$column-count} figure.wp-block-image:not(#individual-image):nth-of-type(#{ $column-count }n) {
-				margin-right: 0;
-			}
 		}
 		// If number of columns not explicitly set default to 3 columns if 3 or more images.
 		&.columns-default {
 			figure.wp-block-image:not(#individual-image) {
-				margin-right: var(--gallery-block--gutter-size, #{$grid-unit-20});
-				width: calc(33.33% - (var(--gallery-block--gutter-size, 16px) * #{math.div(2, 3)}));
-			}
-			figure.wp-block-image:not(#individual-image):nth-of-type(3n+3) {
-				margin-right: 0;
+
+				width: calc(33.33% - (var(--wp--style--scoped-block-gap, 16px) * #{math.div(2, 3)}));
 			}
 			// If only 2 child images use 2 columns.
 			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2),
 			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(2) ~ figure.wp-block-image:not(#individual-image) {
-				width: calc(50% - (var(--gallery-block--gutter-size, 16px) * 0.5));
+				width: calc(50% - (var(--wp--style--scoped-block-gap, 16px) * 0.5));
 			}
 			// For a single image set to 100%.
 			figure.wp-block-image:not(#individual-image):first-child:nth-last-child(1) {