rachelandrew · GitHub

I've had various people ask me the same question as raised here: rachelandrew/cssgrid-ama#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.

Read the original on github.com ↗