CODEWITHSUNDEEP
csscss-grid
FutureCake
FutureCake

Reputation: 2943

CSS nested minmax inside of grid layout

I have this piece of css to set the columns of my grid:

grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

this works fine but I want to extend this so I can use a percentage value with a max of a certain amount of pixels like so:

grid-template-columns: repeat(auto-fill, minmax(minmax(15%, 180px), 1fr));

But this just gives me colums of a width of 100%. Which is definitely not what i want.
How to I accomplish this?

Upvotes: 7

Views: 2299

Answers (1)

Temani Afif
Temani Afif

Reputation: 272789

Use min() inside minmax() like below

.container {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15%, 180px), 1fr));
  grid-gap:10px;
  margin:5px;
}
.container > * {
  height:50px;
  background:red;
}
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="container" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Upvotes: 11

Related Questions