Re: [csswg-drafts] [css-grid] grid area as element (#4416)

Love it :) 

> @chvndb Again, I do not know if this even technically possible [...]

Being able to use **decoration** properties such as backgrounds and borders for _virtual_ grid area elements should be interesting and would also reduce wrapper polution.

My guess is it could be "technically possible" to insert a virtual "grid area element" just like `display:table-cell` implicitely creates a virtual table element to contain it that also appears in the accessibility tree and `display:contents` doing the opposite.
However, this virtual table element is not stylable as well (afaik), i.e. there's no _parent element selector_ (yet) or some `:table()` pseudo-class to travel up the (shadow?) tree.

Your proposed syntax using `.grid[area='content']` is already taken by the attribute selector and would match any "physical" element such as `<foo area="content">`. 

Off the top of my head I'd suggest some variation of `:grid-item()` -- and maybe `:flex-item()` too while we're at it :)
/* a.) any grid item in any grid */
:grid-item() { }
/* b.) item(s) in grid-area areaname */
header:grid-item(areaname) { }
/* c.) item spanning the specified tracks: row-start / row-end / col-start / col-end  */
.mygrid:grid-item( 1 / span 2 / content-start / -1) { }
Using `<integer>`, `<custom-ident>` and `span` would be in line with `grid-area`, `grid-row` and `grid-column`. If combined with other pseudo-classes magic things could happen.
:grid-item():nth-child(even) { background:white }
:grid-item():nth-child(odd) { background:black }
:grid-item():last-child { }

Dealing with gaps/gutters might be challenging as well as defining inheritance to and from these areas or formatting contexts, directionality ... dragons!

Maybe something along `box-sizing:gutter-box|track-box|item-box` could help whether to collapse or skip over the gaps to draw backgrounds or borders and to compute the size of the specified area for sth. like `display:flex`.

my 2.5ct

GitHub Notification of comment by WebMechanic
Please view or discuss this issue at using your GitHub account

Received on Saturday, 12 October 2019 15:32:57 UTC