Skip to content

Prevent Grid Column Width Exceeding Container (Grid interactivity)#69059

Merged
tellthemachines merged 1 commit intoWordPress:fix/grid-col-min-widthfrom
huubl:limit-grid-column-width
Jan 21, 2026
Merged

Prevent Grid Column Width Exceeding Container (Grid interactivity)#69059
tellthemachines merged 1 commit intoWordPress:fix/grid-col-min-widthfrom
huubl:limit-grid-column-width

Conversation

@huubl
Copy link
Contributor

@huubl huubl commented Feb 5, 2025 •
edited
Loading

What?

Closes #69060

Updates the $max_value calculation in the gutenberg_get_layout_style function to prevent columns from exceeding the container's width. Adds a min function to ensure minimumColumnWidth does not surpass 100% of the container's available space.

Why?

This PR is necessary to fix layout issues where columns could become wider than their container, especially on smaller viewports. This ensures a responsive and consistent layout.

How?

The PR modifies the $max_value calculation in the gutenberg_get_layout_style function by adding a min function to limit the minimumColumnWidth to a maximum of 100% of the container's available space.

Testing Instructions

  1. Create a Playground: https://playground.wordpress.net/?networking=yes&plugin=gutenberg
  2. Enable "Blocks: add Grid interactivity" in the Experimental settings
  3. 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 -->
  1. Check frontend at 400px viewport and confirm the columns are exceeding the viewport/grid container.

Testing Instructions for Keyboard

--

Screenshots or screencast

Before After
image image

@github-actions
Copy link

github-actions bot commented Feb 5, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: huubl <[email protected]>
Co-authored-by: tellthemachines <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@huubl huubl mentioned this pull request Feb 5, 2025
Closed
6 tasks
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Feature] Layout Layout block support, its UI controls, and style output. labels Feb 20, 2025
tellthemachines
tellthemachines reviewed Dec 4, 2025
View reviewed changes
Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR @huubl! I can confirm this fixes the issue. The value also needs updating here for the editor, and for the backport changelog we can use this one which tracks related grid work.

@tellthemachines tellthemachines mentioned this pull request Dec 5, 2025
Open
8 tasks
@tellthemachines
Copy link
Contributor

tellthemachines commented Dec 9, 2025

The value also needs updating here for the editor, and for the backport changelog we can use this one which tracks related grid work.

@huubl are you able to update the PR with these changes? No worries if not, someone else can pick it up. Just need to know if we should reassign it 😄

@tellthemachines tellthemachines changed the base branch from trunk to fix/grid-col-min-width January 21, 2026 04:03
@tellthemachines
Copy link
Contributor

tellthemachines commented Jan 21, 2026

I'm going to merge this PR into a fresh feature branch so I can add the changes needed. Thanks again for working on this @huubl!

@tellthemachines tellthemachines merged commit cc31a90 into WordPress:fix/grid-col-min-width Jan 21, 2026
68 of 72 checks passed
@tellthemachines tellthemachines mentioned this pull request Jan 21, 2026
Merged
@huubl huubl deleted the limit-grid-column-width branch January 26, 2026 08:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tellthemachines tellthemachines tellthemachines left review comments

Assignees

No one assigned

Labels

[Feature] Layout Layout block support, its UI controls, and style output. [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Grid Column Width Exceeding Container on mobile (Grid interactivity)

3 participants

@huubl @tellthemachines @t-hamano