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:

```css
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;
}
```

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

Answer: 
It's clear that the major browsers default to the `max` value in the `minmax()` function.

The spec definition is not clear on how this matter – `min` or `max` default? – should be handled:

> 
> [**`minmax()`**](https://www.w3.org/TR/css-grid-1/#valdef-grid-template-columns-minmax)
> 
> 
> Defines a size range greater than or equal to *min* and less than or
>  equal to *max*.
> 
> 
> If *max < min*, then *max* is ignored and `minmax(min,max)` is treated
>  as *min*. 
> 
> 
> As a maximum, a `<flex>` value sets the track’s flex factor; it is
>  invalid as a minimum.
> 
> 
> 

There may be more to this behavior that I haven't yet discovered in the [track sizing algorithm](https://www.w3.org/TR/css-grid-1/#algo-track-sizing).

Here's an alternative approach to the problem:

* set the row height to `auto` (content-based height)
* manage the min and max heights on the grid item

```css
body {
  background: gray;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;  /* adjustment */
}

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

aside.homepage {
  background: blue;
  min-height: 50px;   /* new */
  max-height: 150px;  /* new */
}
```

```html
<aside>aside</aside>
<aside class="homepage">
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</aside>
<aside>aside</aside>
```
[In general, tracks will try to reach their max size:](https://drafts.csswg.org/css-grid/#algo-grow-tracks)

> 
> 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.