diff --git a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
index 2ca65eb6722e4..0b6dfbb6f29c6 100644
--- a/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
+++ b/packages/block-editor/src/components/grid-visualizer/grid-visualizer.js
@@ -51,7 +51,9 @@ function GridVisualizerGrid( { blockElement } ) {
 			style={ gridInfo.style }
 		>
 			{ Array.from( { length: gridInfo.numItems }, ( _, i ) => (
-				<div key={ i } className="block-editor-grid-visualizer__item" />
+				<div key={ i } className="block-editor-grid-visualizer__cell">
+					<div className="block-editor-grid-visualizer__drop-zone" />
+				</div>
 			) ) }
 		</div>
 	);
diff --git a/packages/block-editor/src/components/grid-visualizer/style.scss b/packages/block-editor/src/components/grid-visualizer/style.scss
index 45140e59c7af9..cbbd0c30c4c13 100644
--- a/packages/block-editor/src/components/grid-visualizer/style.scss
+++ b/packages/block-editor/src/components/grid-visualizer/style.scss
@@ -1,33 +1,52 @@
-// TODO: Specificity hacks to get rid of all these darn !importants.
-
 .block-editor-grid-visualizer {
-	z-index: z-index(".block-editor-grid-visualizer") !important;
-}
+	// Specificity to override the z-index and pointer-events set by .components-popover.
+	&.block-editor-grid-visualizer.block-editor-grid-visualizer {
+		z-index: z-index(".block-editor-grid-visualizer");
 
-.block-editor-grid-visualizer .components-popover__content * {
-	pointer-events: none !important;
+		.components-popover__content * {
+			pointer-events: none;
+		}
+	}
 }
 
 .block-editor-grid-visualizer__grid {
 	display: grid;
 }
 
-.block-editor-grid-visualizer__item {
+.block-editor-grid-visualizer__cell {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+}
+
+.block-editor-grid-visualizer__drop-zone {
 	border: $border-width dashed $gray-300;
+	width: 100%;
+	height: 100%;
+
+	// Make drop zone 8x8 at minimum so that it's easier to drag into. This will overflow the parent.
+	min-width: $grid-unit-10;
+	min-height: $grid-unit-10;
 }
 
 .block-editor-grid-item-resizer {
-	z-index: z-index(".block-editor-grid-visualizer") !important;
-}
+	// Specificity to override the z-index and pointer-events set by .components-popover.
+	&.block-editor-grid-item-resizer.block-editor-grid-item-resizer {
+		z-index: z-index(".block-editor-grid-visualizer");
 
-.block-editor-grid-item-resizer .components-popover__content * {
-	pointer-events: none !important;
+		.components-popover__content * {
+			pointer-events: none;
+		}
+	}
 }
 
 .block-editor-grid-item-resizer__box {
 	border: $border-width solid var(--wp-admin-theme-color);
 
 	.components-resizable-box__handle {
-		pointer-events: all !important;
+		// Specificity to override the pointer-events set by .components-popover.
+		&.components-resizable-box__handle.components-resizable-box__handle {
+			pointer-events: all;
+		}
 	}
 }