Re: [csswg-drafts] [css-grid] Display any element as part of any given grid

I don't think that subgrid would provide the full flexibility of my wish. I'll be happy to be proven wrong though 😀

Subgrid is looking good for the listed use cases, but my wish is not mainly about lining up stuff, instead it's more about "reordering" across the complete DOM tree.

To illustrate:

This

```
<body>
  <div id="foo">
    <div>some</div>
    <div>content</div>
    <div>here</div>
  </div>
  <div id="bar">also some content</div>
</body>
```

plus this

```
#foo {
  display: grid;
  grid-template-columns: repeat(2, auto);
}
#bar {
  display-as-grid-item-of: "#foo";
  /*
  Where to place it in grid #foo :
  */
  grid-row: 1;
  grid-column: 2;
}
```

would make #bar appear in the grid #foo, as grid item of grid #foo, as if the markup would have been

```
<body>
  <div id="foo">
    <div>some</div>
    <div>content</div>
    <div>here</div>
    <div id="bar">also some content</div>
  </div>
</body>
```

Element #bar gets laid out as part of grid #foo, in this example at the location grid-row: 1; grid-column: 2 . (If grid-row and grid column would not be specified, the element would get laid out as if it would have been added as last child of #foo).

This feature would allow the CSS Grid user to place any element located anywhere in the page DOM into any layout grid.

It might be a feature for Grid 2 or Grid 3.

-- 
GitHub Notification of comment by tobireif
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2530#issuecomment-380412087 using your GitHub account

Received on Wednesday, 11 April 2018 10:59:30 UTC