[csswg-drafts] [css-grid] Bug/Feature: Grid repeat row, 1 column - creates columns instead of rows (#10682)

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

== [css-grid] Bug/Feature: Grid repeat row, 1 column - creates columns instead of rows ==
The following setup, attempts to assign multiple items to the same name grid area.
We would expect the items, not to be drawn atop of each other but more intelligently placed
according to the grid autoflow settings. So if it was row, then should be row, if column then column.

But it looks like auto-flow and column template constraint is ignored one has to use grid-column:1 on each item to force the grid-template-column 1fr constraint;

Expected Behaviour of name grid items, if more than a single item is assigned to the same grid item then
inject a container item for HTML natural dom layout, auto inject a subgrid, that automatically inherits from parent grid,
to fix the layout issues.

Behaviour:

HTML+Style
```.html
<style>

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto, [top-group] 100px) repeat(auto, [middle-group] 200px) repeat(auto, [bottom-group] 200px) repeat(auto,  200px);
  grid-auto-flow: dense row;  
}

<body>
<div class="grid-container">
  <div style="grid-row: top-group;">1</div>
  <div style="grid-row: bottom-group;">2</div>
  <div style="grid-row: middle-group;">3</div>  
  <div style="grid-row: top-group;">4</div>
  <div style="grid-row: middle-group;">5</div>
  <div style="grid-row: bottom-group;">6</div>
  <div style="grid-row: middle-group;">7</div>
  <div style="grid-row: bottom-group;">8</div>
  <div style="grid-row: top-group;">9</div>
</div>
</body>
</style>
```
Expected Output, is a single column, where the rows are grouped, according to auto-fill.
```.html
1
4
9
3
5
7
2
6
8
```
Actually Output
![image](https://github.com/user-attachments/assets/91e86430-e6d1-4310-a45f-f5aa74b9cd1d)


```.html 

<div class="grid-container">
  <div style="grid-row: top-group;">1</div>
  <div style="">2</div>
  <div style="grid-row: bottom-group;">3</div>  
  <div style="">4</div>
  <div style="">5</div>
  <div style="">6</div>
  <div style="">7</div>
  <div style="">8</div>
  <div style="">9</div>
</div>
```

Expected Output - Other predictable behaviour:
```.html
1
3
remaining items, either fill unassigned groups "dense" or just append to the last non-name group. "non-dense"
2
4
5
6
7
8
9
```
Actually Output:
```.html
![image](https://github.com/user-attachments/assets/72fdea08-32ba-45c0-b43c-faf1c37e8d6a)

```



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


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

Received on Sunday, 4 August 2024 07:48:04 UTC