CSS, grid адаптивка к сложным блокам

К примеру есть grid контейнер фиксированной высотой допустим 500px, внутри него есть N количество элементов.
Пример:Как сделать адаптацию под такие контейнеры если количество элементов в них динамическое? (Можно использовать js)
К примеру как сделать у элементов внутри контейнера некую минимальную ширину пересекая которую элементы вместо того чтобы вставать в 2 строчки встанут в 3?

Что то по типу такого:

 @media .item and (max-width: 200px) {
  .items {
     grid-template-rows: repeat(3, 1fr) !important; 
  }
} 

Но даже если будет такой способ то это тоже не решит проблему, в иделе чтобы если размер .item меньше условных 200px то у контейнера + один перенос на следующую строчку:

 @media .item and (max-width: 200px) {  
  .items {  
     grid-template-rows: repeat(currentStr + 1, 1fr) !important;   
  }  
}