Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow mzp-t-columns-three selectively shrink to two columns instead of just one #950

Open
janbrasna opened this issue Jul 3, 2024 · 0 comments

Comments

@janbrasna
Copy link
Contributor

janbrasna commented Jul 3, 2024

Currently only mzp-t-columns-four allows shifting to 2col layout in small containers:

Column layouts change automatically at different breakpoints, or in different
container widths.
- Small viewports and containers are always a single column.
- In medium viewports or containers, three columns will be a single column.
- In medium viewports or containers, four columns will be two columns with the
third and fourth wrapping under the first and second.

Can maybe a modifier of some sorts be used to selectively allow even a mzp-t-columns-three to change to 2col instead of just linear layout, when the author knows the presentation, layout and order of such content is not important and the columns can be reshuffled freely?

Please describe the use case(s) for this component

Often a mzp-t-columns-three layout doesn't need to retain the 3×N relation of the elements and their more relaxed reordering is not an issue. (Whereas in default the actual 3×N layout to place elements side-by-side might be necessary, so I guess this should be behind a class flag to explicitly allow it(?))

Please describe the change you wish to see

Explore a meaningful way to add such a modifier class to allow even/multiple columns for smaller containers even for odd-column-layout component.

Please describe why these changes need to be made

Allowing more adaptive layouts for mid-size viewports for mzp-t-columns-three instead of just linear layouts.

Please describe where this component is currently in use

https://www.mozilla.org/products/ (+2col downgrade PoC janbrasna/bedrock@78bd648)
https://www.mozilla.org/firefox/developer/#fordevs (where smaller viewports align the DevTools features to one side making it seem like content's missing)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant