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

Thanks for you input!

> once a grid is defined, it can potentially create "slots" with the definite size and position for elements that are not loaded yet.

You're referring to the loading phase, but just in case someone might misunderstand the above:

Just to clarify: 

The element would get rendered as if it had been appended to the children elements of the grid container element. There's no need for the web developer to `create "slots" with the definite size and position` - the layout-moved element would simply get rendered as if it were a DOM tree child of the Grid container element. It would get placed via auto-placement just as if it would be an actual DOM tree sibling of the other grid items in that grid. Optionally, the layout-moved item could get positioned using eg `grid-row` and `grid-column`.

> I don't like identifying the grid by the ID of the element in the source document language.

You could use any selector 😀and you could easily avoid using IDs.

> I'd prefer naming grids in CSS only

Selectors are CSS 😀(The ID selectors in my above example are just plain CSS selectors.)

Since we already have a system for pointing at elements (CSS selectors) we don't have to (and thus should not) add an additional system for pointing at elements. And we don't have to (and thus should not) require the web developer to create names. We can already point at the grid (using CSS selectors) - without having to add the line `grid-name: the-name`.

```
.any_selector > .pointing_to_the_grid {
  display: grid;
  /* Any additional normal Grid stuff here: */
  grid-template-columns: repeat(2, auto);
}
footer .any_selector .pointing_to_the_element {
  /* The new feature: */
  grid-item-of: ".really_any_selector .pointing.to_the_grid";
  /* The element gets placed in the grid as if it were appended to the grid children. */
  /* Optional: Where to place it in the Grid: */
  grid-row: 1;
  grid-column: 2;
  /* Any additional Grid item properties. */
}
```

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

Received on Tuesday, 15 May 2018 17:46:04 UTC