minmax() in CSS grid layout

Question

I'm facing some issues with the minmax() function related to CSS grid layout.

Here is my code:

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr 1fr;
  grid-gap: 20px;
}

.grid div {
  border: 1px solid rgb(0, 95, 107);
  border-radius: 3px;
  background: rgba(0, 95, 107, 0.8);
  padding: 0.2em;
  color: #FFF;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

When I use minmax() with fr unit as mentioned in my CSS, width of grid tracks get the max value, and stay in the max size even if I reduce the viewport; but when I used it with px as follows

grid-template-columns: minmax(150px, 250px) 200px 200px;

It works as expected, I don't know why.

Tested on: Chrome and Firefox

Answer 1

There is nothing wrong with your code. This seems to be the standard behaviour of minmax when combined with columns that use the fr unit because the fr unit has no minimum value (except the width of its content which is here almost empty – just a single digit).

If there is enough screen space minmax will take up its maximum value.

If you were to increase the maximum value in minmax and then adjust your browser window you'll notice that minmax is working, and that when there is not enough space for it to be at its maximum width, its width will decrease.