CODEWITHSUNDEEP
csscss-grid
Some Noob Student
Some Noob Student

Reputation: 14574

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

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?

Upvotes: 1

Views: 659

Answers (2)

Shubham Rawat
Shubham Rawat

Reputation: 25

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(1fr,33%)

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272963

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>

Upvotes: 2

Related Questions