minmax() defaulting to max

Question

I tried to set minmax() for the grid-template-rows and interestingly enough, the outcome was that grid-rows extended to the max of the minmax() instead of min.

How could we make grid rows stay at the minimum declared size, and later if more content is added - the grid row would expand to the maximum declared size and not more?

Here is an example:

body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: minmax(50px, 150px);
}

aside {
  border-right: solid 1px red;
}

aside.homepage {
  background: blue;
}

<aside></aside>
<aside class="homepage">
  <header></header>
  <main></main>
  <footer></footer>
</aside>
<aside></aside>

Answer 1

In general, tracks will try to reach their max size:

If the free space is positive, distribute it equally to the base sizes of all tracks, freezing tracks as they reach their growth limits (and continuing to grow the unfrozen tracks as needed).

(In this context, "growth limit" is mostly a synonym for "max size in minmax()".)

This happens to usually be what you want the track to do.

To get the effect you're looking for, where it wraps tightly but won't go above a certain limit, you can tweak what you're doing a bit:

• use minmax(50px, min-content) on the row sizes; this'll wrap them tight to the contents, but won't let them shrink below 50px.
• use max-height: 150px on the actual grid items, so they'll max out at 150px.

These two together should achieve the effect you want.