Enable grid block to be responsive when columns are set #73662
Merged
+54
−72
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +3 B (0%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
ramonjd
approved these changes
Dec 2, 2025
Member
There was a problem hiding this comment.
This is working well for me:
I checked the editor and frontend, and also the generated values. The CSS output is the same.
Grid blocks build in trunk also show no regressions for me.
Kapture.2025-12-02.at.15.18.41.mp4
The UI is also simplified by removing the Auto/Manual toggle.
This is one of the top advantages in my opinion. No longer are we asking users to understand what Auto and Manual mean.
Do you think it's worth adding tests in packages/block-editor/src/layouts/test/grid.js to cover the combined mode (when both minimumColumnWidth and columnCount are set)?
Other than that it LGTM
cc @jasmussen for 👀
Contributor
Author
Yeah worth adding another test!
I think you meant @jasmussen 😄 |
Member
🤦🏻 Oof, yes I did. Sorry |
Contributor
Author
|
Also, cc @ObliviousHarmony who suggested we add this feature ages ago! |
Contributor
|
Thanks for working on this, I think it works well, and is certainly more intuitive and flexible than the manual/auto. I do think we can improve the UI a little bit. I have this older mockup for min/max columns: 
It's fairly easy to read as far as showing the upper and lower boundaries, and the paragraph of text below I think helps. Perhaps we can do something like this? 
|
Contributor
Author
|
Updated to apply @jasmussen's suggestion! |
tellthemachines
added
[Type] Enhancement
This was referenced Dec 3, 2025
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
A minimal iteration on #57478.
This PR allows both "minimum column width" and "columns" controls to be used simultaneously and removes the toggle between Auto and Manual modes.
Currently in trunk users have to choose between setting a minimum column width, which allows the grid to be responsive, or a number of columns, which stays fixed.
In this branch, that behaviour is maintained if users set only one of the controls. However, if they choose to set both, "columns" will now behave as "max columns", and will become responsive according to the minimum column width set.
The UI is also simplified by removing the Auto/Manual toggle.
Testing Instructions
The below video shows the difference between setting only a min width, and setting both min width and columns.
grid_always_auto.mp4