Columns: add min and max width settings for responsive control

[StevenDufresne]

What problem does this address?

The <Columns> block is really useful in constructing responsive layouts, especially when they are nested together. However, there are times when you want columns to stack before the mobile breakpoint is triggered to avoid some awkward layouts.

What is your proposed solution?

Add min and max support to the Columns block so a user could define a minimum number of columns, like 2, and a max, like 6, which would mean that on mobile the columns would collapse down to 2 rather than stacking.

[webdados]

I think that before doing it at the columns block level, this should be easier to set globally at the theme level.
Not saying it's not useful to have it at the block level, but I think that should be a second feature. What we really need is a way to change the mobile>desktop responsive breakpoint globally on a website.

[andrear9]

Something like this would be perfect!

[annezazu]

Renaming this issue (hope that's okay) to focus it a bit more around allowing for min and max width settings. This means that essentially a user could define a minimum number of columns, like 2, and a max, like 6, which would mean that on mobile the columns would collapse down to 2 rather than stacking.

[annezazu]

Calling on @WordPress/block-themers as it would be helpful to have some folks explain how you would achieve this with regular CSS to get a clearer idea of what settings/block supports need to be implemented. If anyone has time, please chime in directly on this issue!

[t-hamano]

Not a perfect solution, but maybe a Grid block variation would help?

a05df6185771035660ef20368c9be1b9.mp4

By the way, I understand that there are many suggestions regarding responsive UI.

https://github.com/WordPress/gutenberg/issues?q=is%3Aissue%20state%3Aopen%20responsive%20in%3Atitle

[jasmussen]

I've been pondering this issue with the following mockup:

A min-column width control is an option, though there's some simplicity in doing that math for the user.

[MaggieCabrera]

I've found myself wanting this control for grid more than I have for the columns block personally!

[annezazu]

@MaggieCabrera I think we need it in both! The Grid experiment allows for this because it relies on a combination of max columns and minimum column width.