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

> The CSS specs themselves would strongly benefit from this.

Glad to hear that!

And I think that many more projects could benefit from the new feature.

There's a given DOM tree, and Grid gives us the freedom to lay out eg a sub-tree in nearly any possible way (yay!) But when the design process identifies that eg one element from outside of that sub-tree should get displayed as part of that mentioned grid, then that currently could only be solved by moving it in the DOM tree (eg using JS). That's a bit hacky - the beauty of Grid, Flexbox, etc is that the DOM tree does not have to get modified in order to apply the layout.

(I'm aware that I'm mostly preaching to the choir 😀 but reasoning about the feature can help with crystallizing the details.)

The example from above, with a more general property name `display-as-layout-item-of`:

```
#the_grid {
  display: grid;
  /* Any additional normal Grid stuff here: */
  grid-template-columns: repeat(2, auto);
}
#the_element {
  /* The new feature: */
  display-as-layout-item-of: "#the_grid";
  /*
  Where to place it in the Grid :
  */
  grid-row: 1;
  grid-column: 2;
}
```

I hope that the new functionality will get added to Grid 😀

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

Received on Tuesday, 15 May 2018 10:24:30 UTC