[csswg-drafts] [css-grid-2] Adding auto placement override capibilities (#8655)

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