[csswg-drafts] [css-grid] Allow control over wrapping grid items (#8100)

SebastianZ has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] Allow control over wrapping grid items ==
I currently have a use case which is somewhat related to #3622 but different enough. So I thought it's worth discussing it separately. In that use case I want

* all items to be flexible
* have the same width
* flow horizontally
* a dynamic number of columns
* the items to have a minimum width
* align on a grid
* wrap when the items don't fit

Flexbox currently fulfills all criteria minus forcing all items to have the same width and to align them on a grid. And Grid fulfills all but the dynamic number of columns using an explicit grid and all but the last one when relying on auto-flow.

Here's a simple example:
https://jsfiddle.net/SebastianZ/ex5j9yck/

If I am not mistaken, the only way to solve this issue currently is to use an explicit grid and change the number of columns using media or container queries and calculate the widths for when to wrap manually. Feel free to correct me!

To solve that use case in a proper way, an option in Grid is need to wrap the items like in Flexbox when they don't fit into the track in implicit grids. E.g. something like a `wrap` keyword for `grid-auto-flow` or a generalization of the `flex-wrap` property that also applies to Grid.

Sebastian

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8100 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 18 November 2022 15:10:09 UTC