[css-grid] Feature: Display:Grid: grid-temp-col*: repeat+[set](autofill, min-column-width, max-column-width , bias-change, max-repeat) = repeat(auto-fill, 30rem, 40rem, min, 5)

[wesleyolis]

Hi,

I would like to propose the following improvements to display: grid, which I am now achieving with @media queries to get the layout I want with flex-shrink and grow behaviour. Unfortunately flex with many items is slow and lags, so grid is better if de-couple the grid item width for the render else it can also hang. for example applying max-width to child items.

I would like to achieve the following layouts as achieved with @media queries on the below website: https://jonginenge.co.za/livecams/nahoonbeach/daily/thumbnails.php?Bouq=&Year=2024&Image=-1 but it would be much faster if grid supported it.

Proposal-Idea: To the grid template layout, for repeat added the following support, this could also be done in the shorthand templates with some other syntax. Just remember everything is sets, so you have to do the same for grid-template-rows

grid-template-columns: repeat(autofill, [min-column-width], [max-column-width] , [bias-change], [max-repeat])   

or

{
grid-template-columns: 1fr 1fr 1fr 0.2rem[name-column] 1fr, 1fr, 1fr
grid-template-columns-widths: [min-all-column-width], [max-all-column-width] , [bias-all-change], [max-repeat]
}

or

This would be per row of column layout if in front for all remaining columns, if behind specific to the to that column.

{
grid-template-columns: ([min-all-column-width], [max-all-column-width], [bias-all-change], [max-all-repeat])1fr 
 1fr 1fr 0.2rem[name-column] 1fr, 1fr([min-column-spesific-width], [max-column-width], [bias-change]) [column-name]), 1fr;
}

or

The ability to repeat this as well for a set of columns, were included named dividers.

{
grid-template-columns: repeat-set(auto-fill, ([min-all-column-width], [max-all-column-width], [bias-all-change], [max-all-repeat])1fr 1fr([min-column-spesific-width], [max-column-spesific-width], [bias-change]) [column-name] 1fr 0.2rem[name-column] 1fr, [max-set-repeat]);
}

added support for repeat(autofill, min-column-width, max-column-width , max-repeat) Support follow constraint parameters for layout.

1. [min-column-width], the minimum size of a column.
2. [max-column-width] , the maximum size of a column
3. [max-repeat], the maximum number of columns, then equal space the grid to either side.
4. [bias-change], this is basically wheather to step up or down based on min or max column width, when going from 2 ->3 or 3->4 or 4 -> 5 columns in the layout.
5. [max-set-repeat], this is the maximum number of times a set of template of columns or rows will be repeated.

I don't want to wait for a full another column at min-column-width of space to be available, when in 1 column layout, before more columns can be introduced. When the max-column-width is hit, break into 2 column layout and adjust the layout based on min-column-width for 2 columns. Example:

{
grid-template-columns: repeat(autofill, 25rem, 40rem,min-col, 3) 
}

1. The grid first display at 1 column, to a maximum size of 40 rem.
2. It then should want to change to 2 column layout, but only if min-column-width can be met. If it can't meet it, the grid remains the same side or pads itself with margin:0 auto;
3. if the min-column-wdith can be met, then goto 2 column layout in this case at 50rem of space, the grid goes into 2 column layout it will remain in 2 column layout until, 80rem + gaps or when. 3 columns 3* 25rem[grid-column-min] + gaps it go to 3 column layout.

One could add a bias setting to things as well, for like when to go from 2, 3 columns on max-column-width or min-column-width, by default min-column-width.

If you have any question please don't hesitate to ask. this would make life so much easier.

The following as well. https://github.com/w3c/csswg-drafts/issues/10406

[fantasai]

• Minimum + maximum sizes of columns can be specified with minmax() already, so I think we don't need to add that.
• Seems like you're asking for a maximum number of repeats? That seems reasonable.
• Control over rounding also makes sense.