Favor minimum size minmax()

Question

I am developing a task website that uses CSS grid to list tasks. The problem is that the available tasks fill up the max value of minmax() when more tasks could fit per row if the smaller value was favored. (I want the tasks to be as condenced as possible. I can do that if the max value is 1fr, but I need to limit the width of my items.

HTML

<div id = "wrap">
  <div class = "item">
       <p>Lorem ipsum</p>
  </div>
    <div class = "item">
       <p>Lorem ipsum</p>
  </div>
    <div class = "item">
       <p>Lorem ipsum</p>
  </div>
    <div class = "item">
       <p>Lorem ipsum</p>
  </div>
    <div class = "item">
       <p>Lorem ipsum</p>
  </div>
</div>

CSS

#wrap {
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 500px));
  grid-gap: 25px
}

.item {
  background-color: blue;
}

Codepen