[csswg-drafts] [css-grid] Ability to target items in nth-row of autofilled, implicit grid

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

== [css-grid] Ability to target items in nth-row of autofilled, implicit grid ==
I've had various people ask me the same question as raised here: https://github.com/rachelandrew/cssgrid-ama/issues/115 

The use case is as described in that issue. If the author creates the following grid: 

```
nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
```

They then want to style items on the second (or nth) row differently to the first, they don't have a way to target it. I've mocked it up using MQs. https://codepen.io/rachelandrew/pen/yPJKeo?editors=1100

It's really a selectors issue, would the table pseudo-class selectors (https://drafts.csswg.org/selectors-4/#table-pseudos) work on grid items, or is this another instance of needing to be able to target a row or column of the grid, with the added complication of wanting to target the children of that row or column?

At the moment to do so, they need to go back to taking more control over the grid, rather than using auto-fill, so that they know where each item sits and can use nth-child on the items, or use media queries which makes for less flexible components.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1943 using your GitHub account

Received on Monday, 6 November 2017 12:40:39 UTC