<div class="grid">

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

</div>

<div class="grid2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(1fr, 300px)); /* doesn't work as expected */
  grid-template-rows: 50px 50px 50px;
  grid-gap: 10px;
  margin-bottom: 10px;
}

.grid .item {
  background-color: blue;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(3, auto); /* totally works! */
  grid-template-rows: 50px 50px 50px;
  grid-gap: 10px;
}

.grid2 .item {
  max-width: 300px;
  background-color: blue;
}