How to make grid column width the smaller of two values?

Question

I want to make the column width of a 3-column grid to be the minimum of 1fr or 100px. Here's what I tried, but dev tools say it's not a valid value.

.my-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, min(100px, 1fr)));
}

Why isn't this correct?

Answer 1

Use percentage and not 1fr

.my-grid {
  display: grid;
  /* (100% - (N-1)*Gap)/N */
  grid-template-columns: repeat(3, min(100px, calc(100% - 2*5px)/3));
  justify-content: center;
  gap: 5px;
}

.my-grid > div {
  height: 50px;
  background: red;
}

<div class="my-grid">
 <div></div>
 <div></div>
 <div></div>
</div>