[css-grid] More granular auto placement from grid container element

[jacobp100]

https://www.w3.org/TR/css-grid-1/#track-sizing-algorithm

In a many cases, you can rely on the default placement of the grid to do what you want. However, in the cases that it isn’t, you currently have to define grid-area (or other) on the children elements, which seems like a lot of extra ceremony.

Firstly, it would be nice if grid-auto-flow could be extended to allow named grid areas before row/column to populate these areas first.

grid: "a b c" auto / auto auto auto;
grid-auto-flow: b c a;

And this should also work on the grid property itself.

grid: "a b c" auto / auto auto auto b c a;

Presumably, if any children had explicit grid areas, they would be excluded from the auto placement. It’s probably an edge case anyway.

Secondly, it would be nice to add {row,column}-reverse to grid-auto-flow, to match flex-direction - where it will fill items in from the end rather than the start

grid-auto-flow: row-reverse;

[fantasai]

Could've sworn we had an issue on adding row-reverse and column-reverse, but I can't find it... but yes, we should definitely add it.

As for the named area thing, can you explain a bit more what you're wanting and why?

[jacobp100]

The naming thing really just makes it easier to create a layout template without the need to add classes/styles to each individual child. Currently, some grids work automatically to place their content - but as soon as you add empty cells, it no longer works. Picture this:-

.modal {
  grid:
    "heading heading heading" auto
    ".       .       .      " 8px
    "body    body    body   " auto
    ".       .       .      " 12px
    "cancel  .       confirm" auto /
     1fr     4px     1fr
}

It's very cumbersome to manually place each child - and makes the layout much less reusable

[Ragnar-Oock]

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

Something like grid-auto-flow: areas. 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 column 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-auto-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

[Loirooriol]

Secondly, it would be nice to add {row,column}-reverse to grid-auto-flow, to match flex-direction - where it will fill items in from the end rather than the start

Resolved in https://github.com/w3c/csswg-drafts/issues/3622#issuecomment-1789824193