[css-grid] Feature: Place items into anywhere into [grid, hierarchy of subgrid of subgrid]

Basically, the ability to place grid items by name and potentially string positional ints into the defined grid skeleton, subgrid from their parent grid.

This would allow more advanced things to be done, similar to what we would like to achieve with the following feature improvements. [css-grid] Feature: Support Multiple Grid-Items per named area + container behavior, overflow, autolayout

Example of the expected syntax usages and the element content, stating the position name where is expected to be displayed in the grid.

Support for the following

grid-column 1, 2,3, 4

Usage and Expected Placement


.grid {
display: grid;
grid-template-columns: [col-1] 1fr [col-2] 1fr [col-3] 1fr [col-4] 1fr 
grid-auto-flow: column;
}

.SubGridA {
grid-columns: col-2 / col-4;
grid-rows: 1/10;
grid-template-columns: [col-1-1] 1fr [col-2-2];
grid-row-height: 50px; 
grid-auto-flow: column dense;
overflow-y:scroll;
}

.SubGridB {
grid-columns: col-2 / col-4;
grid-rows: 11/10;
grid-template-columns: [col-1-1-1] 1fr ;
grid-row-height: 100px; 
grid-auto-flow: row dense;
overflow-y:scroll;
}

.SubGridD {
grid-column: col-2 / col-4;
grid-rows: 11/20;
grid-template-columns: [col-1-1] 1fr [col-2-2];
grid-row-height: 150px; 
grid-auto-flow: row dense;
overflow-y:scroll;
}

<body>
<div class="grid">
  <div class="SubGridA">
     <div class="SubGridB">
     </div>
  </div>
  <div class="SubGridD">
  </div>
<!-- These items can be place into any position dynamically using CSS of the sub grid structure" -->
    <div style="grid-columns:col-1">grid-col-1</div>
    <div class="grid-columns:col-2">grid-col-2</div>
    <div class="grid-columns:col-1-1">grid-sub-gridA:[col-1-1]</div>
    <div class="grid-columns:col-1 col-1-1">grid-sub-gridA:[col-1-1]</div>
    <div class="grid-columns:col-1-1-1">grid-sub-gridA-SubgridB:[col-1-1-1]</div>
    <div class="grid-columns:col-1 col-1-2 ">grid-sub-gridA-SubgridB:[col-1-1-1]</div>
    <div class="grid-columns:col-1 col-1-2 col-1-1-1">grid-sub-gridA-SubgridB:[col-1-1-1]</div>
    <div class="grid-columns:col-1-1 col-1-1">grid-sub-gridD:[col-1-1]</div>
  </div>
</div>
</body>

w3c / csswg-drafts

[css-grid] Feature: Place items into anywhere into [grid, hierarchy of subgrid of subgrid] #10684