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

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

== [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](https://github.com/w3c/csswg-drafts/issues/10683)

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**
```.css
grid-column 1, 2,3, 4
```
**Usage and Expected Placement**
```.html

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



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