0

I'm trying to do something like this:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

But instead of having the grid items jump to 1fr when they reach < 200px I'd like that to kick in depending on the max-content of those items. I tried this:

grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));

But that just make each item 100% wide each on their own row, and Chrome is telling me it's not valid syntax… I might be missing something obvious

Any pointer in the right direction much appreciated!

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Yann
  • 604
  • 2
  • 7
  • 16
  • 1
    it's invalid because max-content will depend on the content of each element and cannot be used to define the width of all the columns since each element is different – Temani Afif Apr 07 '20 at 23:37
  • I was thinking it would just pick the widest of them since the grid element is aware of all the elements in relation to each others… Guess I was wrong Thanks! – Yann Apr 08 '20 at 13:23

0 Answers0