Grid Column Width Exceeding Container on mobile (Grid interactivity) #69060
Description
Description
The grid columns are exceeding their container's width. I expect the columns to fit within the container, but they overflow instead.
More information: #69059
Step-by-step reproduction instructions
- Create a Playground: https://playground.wordpress.net/?networking=yes&plugin=gutenberg
- Enable "Blocks: add Grid interactivity" in the Experimental settings
- Add this to a page:
<!-- wp:group {"align":"full","layout":{"type":"grid","columnCount":2,"minimumColumnWidth":"793px"}} -->
<div class="wp-block-group alignfull"><!-- wp:group {"style":{"color":{"background":"#ff0000"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"20px","right":"20px"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group has-background" style="background-color:#ff0000;padding-top:var(--wp--preset--spacing--30);padding-right:20px;padding-bottom:var(--wp--preset--spacing--30);padding-left:20px"><!-- wp:paragraph -->
<p>On mobile this column gets wider than its container</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"style":{"color":{"background":"#ff0000"},"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"20px","right":"20px"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group has-background" style="background-color:#ff0000;padding-top:var(--wp--preset--spacing--30);padding-right:20px;padding-bottom:var(--wp--preset--spacing--30);padding-left:20px"><!-- wp:paragraph -->
<p>On mobile this column gets wider than its container</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
- Check frontend at 400px viewport and confirm the columns are exceeding the viewport/grid container.
Screenshots, screen recording, code snippet
No response
Environment info
No response
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