[csswg-drafts] 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) (#10400)

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

== 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)  ==
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. 

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

```.css
{
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.**
```.css
{
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.**

```.css
{
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, );
}
```

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.

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:
 ```.css
{
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.




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


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

Received on Saturday, 8 June 2024 08:52:26 UTC