Targeting Specific rows / columns in Grid. nth-row()?

[wesbos]

I know this isn't possible right now, but was it ever discussed? Curious to hear your thoughts on it.

Say we have a nav that is two levels deep, the top level is nice and big, and as items get knocked onto the second level, you could target them and style differently.

Something like this:

    nav {
      display: grid;
      /* Fit as many as we can on each line, min 150px */
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    nav a {
      font-size: 20px; /* Large first row items */
    }

    nav:nth-row(2) a {
      font-size: 12px; /* Smaller second row item */
    }

[badcat]

Mmm.. yes! I'm interested to hear about this too.

[rachelandrew]

I've seen variations on this question from a few people, it usually comes up at least once when I run a workshop. I've raised an issue over on the CSS WG repo tagged for level 2 (https://github.com/w3c/csswg-drafts/issues/1943). If you have use cases for this, then that would be a good place to comment and add them.

[wesbos]

Thank you - will add them!