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

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?

CodePudding user response：

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 >
 <div></div>
 <div></div>
 <div></div>
</div>

CodePudding user response：

hey in the minmax you don't need to pass the min(), in minmax the first parameter is the min value and second is max value, you can set it accordingly.

like minmax(100px,1fr)