If a WordPress Gallery looks wrong after switching to Grid, inspect the layout class before changing image widths. A rule written for Flex can produce the wrong result in Grid even when every attachment and caption is intact.
First establish which feature you are testing
The October developer roundup describes a Grid variation introduced in Gutenberg 24.0. Flex remains the default. Its Gallery rules are scoped to :where(.is-layout-flex). This is a Gutenberg compatibility check, not a claim that every stable WordPress installation already has the same controls. Record WordPress, Gutenberg and theme versions before comparing sites.
Build a comparison that exposes the problem
On a disposable staging page, create a gallery with six licensed test images: two portrait, two landscape and two square. Give each a short caption and a visibly different subject. Duplicate the gallery, keeping the image order unchanged. Leave one in Flex and select Grid on the other when the installed version offers it.
- Save the page and reopen the editor. Confirm both gallery layouts survived serialization.
- Open the public staging URL while logged out. Inspect the outer Gallery classes, not only an individual image.
- Capture the winning rules for display, width, gap and aspect ratio. Note the stylesheet and line responsible.
- Repeat at a narrow phone width and a wide desktop width. Record both actual width and selected editor preview state.
- Temporarily disable only the suspected theme rule in developer tools. A local visual improvement is evidence to investigate, not a saved fix.
Identity: Same six attachments. Save: Layout survives reopening. Mobile: No horizontal overflow. Public: Anonymous page matches intent. Explanatory checklist, not a customer test result.
Scope the repair to the layout that needs it
Search your theme source for selectors beginning with .wp-block-gallery. Look particularly for unconditional child widths and flex-basis declarations. Do not paste a global width:100% !important override: that can flatten layouts that were working.
A useful change review has three columns: original selector, intended layout and proposed narrower selector. If the rule exists solely to repair the Flex layout, consider scoping it to that layout after checking the actual classes in your rendered HTML. If Grid genuinely needs a different rule, make it explicit and test nested galleries too. Keep the content and attachment IDs unchanged during this CSS investigation.
Decide whether the defect is styling or saved content
| Observation |
Next investigation |
| Correct classes, wrong width only with the theme |
Theme selector and stylesheet order |
| Grid selection disappears after reopening |
Saved block attributes and compatibility |
| Editor is correct, public page differs |
Frontend styles and cached response |
| Images disappear or reorder in both layouts |
Content mutation rather than layout CSS |
For that last case, use our Gallery detach and undo checks. It addresses a different failure than a spacing rule.
Acceptance and rollback
Approve the change only when image count, order, captions and links remain correct in both layouts. Test crop on and off where supported. Check that a long caption wraps without widening the viewport. Retain a copy of the previous stylesheet so rollback does not require rewriting gallery content. Purge only affected page and stylesheet caches after deployment, then inspect the anonymous response again.
For an active customer-facing layout failure, get help with one WordPress problem and include the two fixture URLs and the responsible selector.
Source: WordPress October developer roundup. The comparison procedure above is a suggested diagnostic, not a claim of a test performed on your site.
References reviewed October 17, 2026. Examples are explanatory, not customer test results.