[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.

Basically inject a subgrid to solve your layout problem.
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

Enhance CSS syntax support for grid-container-item-styles


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:


.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:

Source HTML code for above styles


<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>

w3c / csswg-drafts

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