- From: Quentin Albert via GitHub <sysbot+gh@w3.org>
- Date: Tue, 28 Mar 2023 19:29:50 +0000
- To: public-css-archive@w3.org
Que-tin has just created a new issue for https://github.com/w3c/csswg-drafts: == [css-grid-2] Adding auto placement override capibilities == ## Problem There currently is no way to override the auto placement inside of grids. Algorithmic placement of elements inside of a grid to achieve patterns (e.g. checkboard) is therefore only possbile by manually styling all child elements. There should be an easier way to create complex grid placements. While discussing in #8321 I got pointed to #4002 which brings up the idea of default grids columns, rows and areas. This solution is building up on this idea. ## Solution I am thinking about the following properties + naming to solve this: - `grid-auto-placement-column-start` - `grid-auto-placement-column-end` - `grid-auto-placement-column` - `grid-auto-placement-row-start` - `grid-auto-placement-row-end` - `grid-auto-placement-row` - `grid-auto-placement-area` as well as the following function: - grid() ### `grid-auto-placement-x` The `grid-auto-placement-x` properties are defined onto the grid element itself, specifying the auto placement override. Overrides can be plain numbers of type `<integer>` e.g. ```css div { display: grid; grid-auto-placement-area: 1 / 1; } ``` This would result in an easier form of the so called _Grid Stack_ including `::before` and `::after`. Setting `grid-columns`, `grid-rows`, `grid-areas` etc. on a grid-item automatically opts out of the auto placement as it is. Additionally auto placement overrides settings shall not be inherited. ### `grid()` The grid function is pretty similar to `sibling-index()` discussed in #4559. Depending on the implementation details so could actually behave the same. Right now I got two different ideas how it could work. #### Base The idea behind `grid()` is to get the index of the current item that's being placed inside of the grid. The function would have a similar syntax to the [Relative Color Syntax](https://www.w3.org/TR/css-color-5/#relative-colors) by providing a parameter `i` that represents the index. I was thinking about the following: ```css div { display: grid; grid-auto-placement-area: grid(i) / grid(i); } ``` This would place elements diagonally inside of the grid. #### Advanced Combining `grid()` with various functions like [Stepped Value Functions](https://www.w3.org/TR/css-values-4/#round-func) and `calc()` you could e.g. create a checkboard layout in a single line: ```css div { --columns: 5 grid-placement-area: grid(round(up, i, var(--columns))) / grid(calc(mod(i * 2, var(--columns)) + 1)); } ``` Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8655 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 28 March 2023 19:29:52 UTC