Re: [csswg-drafts] [css-grid] More granular auto placement from grid container element (#7399)

As proposed in #4457 `grid-auto-flow` could be used.

Something like `grid-auto-flow: areas` with the optional.
Items would be assigned to valid named areas defined in `grid-template`/`grid-template-areas by order of appearance in the DOM.
Areas would need to be put in a one-dimensional array with areas in the order of the first appearance in the chained template (row-major order), any subsequent appearance not being counted. The top left cell of an area spanning more than one column or row would be the one defining the order of the areas.
Once this array of area is defined, items would be affected one to one, any remaining ones using the implicit grid for placement.

## Proposed value :
- `area`: similar to `row` and `columns` but areas defined in the template are used

## Proposed combinaisons :
- `area`: items are put in the grid following DOM order and area order
- `area row` : (implicit value when only `area` is provided) items that are left when all areas are filled using the implicit row flow algorithm
- `area column`:  items that are left when all areas are filled using the implicit column flow algorithm
- `area dense`: items that remain when all areas are filled are put in cells that are part of invalid (non-rectangular) areas if any exist, items that are left after this step fallback to the implicit row flow. `dense` here has the same meaning as in the other 2 "modes" (`row` and `column`)
- `area row dense`:  (implicit value when only `area dense` is provided) same as before but explicit
- `area column dense`: same as before but using the implicit column flow when all valid and invalid areas are filled

Those combinations mean changing the formal syntax of `grid-auto-flow` by the following :
```
grid-auto-flow = 
  [ area ] ||
  [ row | column ]  ||
  dense 
```

## Controlling how areas are ordered in the auto-flow 
Control of the order of the areas in the flow could be done using `area-row-start` (implicit when only `area` is used), `area-row-end`, `area-column-start`, and `area-column-end` in place of just `area`; where :
- `-row` and `-column` define if the area matrix is read in a row-major or column-major way
- `-start` and `-end` define if the ordering should start from either the start or end of the rows or columns depending on the previous part

that could give something like :
- `grid-auto-flow: area-column-end column dense`: read the areas in column-major (column then row) starting at the end of each column, filling any gaps with left over items and then defaulting to `grid-auto-flow: column` once all the cells defined in the template are filled
- `grid-auto-flow: area-row-start row`: (same as `grid-template-flow: area`) read the areas in row-major (row then column) starting at the beginning of each row, not filling gaps/invalid areas, and defaulting to `grid-auto-flow: row` once all the cells defined in the template are filled

-- 
GitHub Notification of comment by Ragnar-Oock
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7399#issuecomment-1632958835 using your GitHub account


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

Received on Wednesday, 12 July 2023 17:48:32 UTC