[csswg-drafts] [css-grid] Feature: Support Multiple Grid-Items per named area + container behavior, overflow, autolayout (#10683)

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

== [css-grid] Feature: Support Multiple Grid-Items per named area + container behavior, overflow, autolayout ==
The ability to assign multiple items to the same name grid area and for the grid to work,
currently, it draws all the named grid areas on top of each other in the order encountered in the grid container, where the last element appears atop.

I see two ways to solve this issue, of which 1 may be more beneficial for the other, in the bigger picture.
1. Basically inject a subgrid to solve your layout problem.
2. Modify the existing grid code to solve the problem.

The ability to control the overflow(x/y) and the auto layout property of a name grid areas, rows, or columns.
With the ability to assign multiple items to a grid area, one may like to constrain its height and width and provide it overflow setting.

This will allow one to dynamically use CSS and place items into different areas on a grid based on CSS selectors.

Enhancement to CSS Support:

In additional to these combinations
[[css-grid] Feature: Display:Grid: grid-temp-col*: repeat+[set](autofill, min-column-width, max-column-width , bias-change, max-repeat) = repeat(auto-fill, 30rem, 40rem, min, 5)](https://github.com/w3c/csswg-drafts/issues/10400)

Enhance CSS syntax support for grid-container-item-styles
```.css

grid-template-columns: {grid-all-areas-container-item-styles} repeat(autofill, [min-column-width], [max-column-width] , [bias-change], [max-repeat],{grid-container-item-styles}); 

grid-template-columns: {grid-all-areas-container-item-styles} [col-1] 1fr {grid-col-1-styles}  [col-2] 1fr {grid-col-2-styles}  [col-3] 1fr {grid-col-3-styles};  
grid-template-rows: {grid-all-areas-container-item-styles} [row-1] 1fr {grid-row-1-styles}  [row-2] 1fr {grid-row-2-styles}  [row-3] 1fr {grid-row-3-styles};  


grid-template ''GA . . GB ." 
                        ''GA GA GB . ." 
                       ". GC GC GD GD"
                       ". GC . GD GD";    
grid-template-styles: [GA] {grid-container-item-styles} [GB] {grid-container-item-styles} [GC] {grid-container-item-styles} [GD] {grid-container-item-styles}

grid-container-item-styles
{
grid-auto-fill:row/column basically subgrid)
overflow-y: auto, scroll... (normal)
overflow-x: auto, scroll... (normal)
overflow-side: left, right, top, bottom
overflow-bar: clip, contain, max-content
overflow-bar-z-index: +infl
padding: ..
margin:..
}

```

**Examples:**


```.html

.grid {
display:grid;
grid-auto-flow: row dense;
grid-template-column: [GA] 1fr {overflow-y:scroll} [GB] 1fr {overflow-y:scroll} [GC] 1fr {overflow-y:scroll} [GD] 1fr {overflow-y:scroll}
or 
grid-template ''GA . . GB ." 
                        ''GA GA GB . ." 
                       ". GC GC GD GD"
                       ". GC . GD GD";                    
  or 
grid-template-row: [GA] repeat(auto, max-content) {} [GB] repeat(auto, max-content) [GC] repeat(auto, max-content) [GD] repeat(auto, max-content)
}

#cars:has(option[data-grid-group="GA"]:checked) {
grid-area-column/grid-area/grid-area-row: GA;
}

#cars:has(option[data-grid-group="GB"]:checked) {
grid-area-column/grid-area/grid-area-row: GB;
}

#cars:has(option[data-grid-group="GC"]:checked) {
grid-area-column/grid-area/grid-area-row: GC;
}

#cars:has(option[data-grid-group="GD"]:checked) {
grid-area-column/grid-area/grid-area-row: GD;
}

```

**Expected output:**
![image](https://github.com/user-attachments/assets/b562cc16-d9dd-47a1-8acc-890912ea8c01)

**Source HTML code for above styles**
```.html

<form action="/action_page.php">
<div>
Please categorize each item into a list.
</div>

<div class="grid">
<label>Item 1
  <select id="item1" name="cars">
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
  </select>
</label>

<label>Item 2
  <select id="item2" name="cars">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C" selected>C</option>
    <option value="D">D</option>
  </select>
</label>

<label>Item 3
  <select id="item3" name="cars">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D" selected>D</option>
  </select>
</label>

<label>Item 4
  <select id="item4" name="cars">
    <option value="A" selected>A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
  </select>
</label>

<label>Item 5
  <select id="item5" name="cars">
    <option value="A" >A</option>
    <option value="B" selected>B</option>
    <option value="C">C</option>
    <option value="D">D</option>
  </select>
</label>

<label>Item 6
  <select id="item6" name="cars">
    <option value="A">A</option>
    <option value="B" selected>B</option>
    <option value="C">C</option>
    <option value="D">D</option>
  </select>
</label>

<label>Item 7
  <select id="item7" name="cars">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C" selected>C</option>
    <option value="D">D</option>
  </select>
</label>

<label>Item 8
  <select id="item8" name="cars">
    <option value="A" >A</option>
    <option value="B" selected>B</option>
    <option value="C">C</option>
    <option value="D">D</option>
  </select>
</label>

<label>Item 9
  <select id="item9" name="cars">
    <option value="A">A</option>
    <option value="B" selected>B</option>
    <option value="C">C</option>
    <option value="D">D</option>
  </select>
</label>


</div>

  
  <input type="submit">
</form>


```






Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10683 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 09:53:39 UTC