2

I have a css-grid container that uses auto-fill to layout the columns, using minmax to set the column size. Is there a way to target individual items inside the container that fall into whatever the top row happens to wind up being?

ul {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

Is there something in reality that works like the following?

ul li:first-row {
      background: #000;
}
darby3
  • 33
  • 6
  • there is no such selecor but if it's only about background coloration there is other techniques to color only the first row – Temani Afif Jun 19 '19 at 19:30
  • 2
    If you know how many grid items you'll have, then you can use media queries. – Rainbow Jun 19 '19 at 19:38
  • Similar concept: https://stackoverflow.com/q/42176419/3597276 – Michael Benjamin Jun 19 '19 at 19:46
  • 1
    I agree with the media query solution. If you're aware of how many children will be in a row at any given screen size, you could target with ``:nth-child`` inside of a media query. – Grant Noe Jun 21 '19 at 22:35

0 Answers0