Description

I was excited to see the inclusion of the "#73662 Enable grid block to be responsive when columns are set" enhancement in Gutenberg 22.3.0. And I am pleased to confirm that the specific feature added here works as I would expect - the grid columns resize and reposition for smaller screens, even when the number of columns is set.

However, I believe that the number of columns calculation works nicely with the 2025 and 2024 themes, but not so well with many others. This showed up because I was using a Block theme, which was not 2025.

When I add a grid with 3 or more items, and choose Max columns: 3, Min column width: 10rem, I would expect to see 3 items sitting in a row (on a large enough screen). However, what I see is a row of 2 with the third item underneath. (To see my row of 3, I need to choose Max columns: 4).

Oddly, specifying the Block Spacing specifically (rather than leaving it at the default value), causes the problem to be rectified.

I spotted this problem when using a theme which has the default blockGap set to 40px. On trying various themes, I realised that the column sizing works for the 2025 and 2024 themes (which both have default blockGap set to 1.2rem). But any theme I tried which has a blockGap larger than this, showed the problem, with the number of columns incorrect.

In the attached video, which demonstrates the problem, I am using the 2025 theme, but with one change: in theme.json, styles > spacing > blockGap is set to 1.4rem instead of 1.2rem.

Because the column width calculation works successfully
a) when Block Spacing is specifically set for the Grid, and
b) for 2025 and 2024 themes (which both have default blockGap of 1.2rem)
I believe that the calculation is not picking up the theme's default block size successfully, and is using a hard-coded value of 1.2rem.

It is possible that this piece of code (around line 142 in packages/block-editor/src/layouts/grid.js)

	// If a block's block.json skips serialization for spacing or spacing.blockGap,
	// don't apply the user-defined value to the styles.
	const blockGapValue =
		style?.spacing?.blockGap &&
		! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
			? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
			: undefined;

is not setting up the default blockGapValue successfully for the column width calculation. But I am not really familiar with this area, so it could be something else.

Step-by-step reproduction instructions

1. Use a theme such as 2023, or any theme with default blockGap larger than 1.2rem.
2. Add a Grid and fill with 3 or more items, such as images.
3. In the Grid settings, choose, for example, Max columns: 3, Min column width: 10rem,
4. On a medium/large screen, this should show 3 columns... but it does not. (In order to get the 3 columns to work, you have to enter 4 columns, etc!)
5. In the Grid styling, set Block Spacing to a (reasonable) value. This should now show the correct 3 columns.

Screenshots, screen recording, code snippet

Environment info

WordPress 6.9, Gutenberg 22.3.0
Theme 2025, with a change to theme.json:-
styles > spacing > blockGap in theme.json is set to 1.4rem instead of 1.2rem.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure