How to set custom height of one row in grid?

Issue

I want to set custom height in one specific row in grid gallery view.

.grid-gallery {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-rows: 250px;
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
}

I have 3 columns and each row (I have dynamic amout of rows) has got 250px height. Now I want to add one div with .grid-title class to have e.g. 100px height and of course this div muse span 3 colums to have 100% width of grid-container.

I have tried something like this but it doesn't change the height of 3 colums. Even with display: grid it's not working too.

.grid-title {
  grid-column: span 3;
  grid-template-rows: 100px;
  grid-auto-rows: 100px;
}

It should looks like this:

EDIT

Working pen:

https://codepen.io/freestyle09/pen/oNvGywK

Solution

Ok I found solution. When we want to set dynamic height of few divs inside grid container we must use minmax() function.

grid-auto-rows: minmax(50px,auto);

After this we can manually set height of our grid items:

.item {
    height: 320px;
}

Here's working example: https://codepen.io/freestyle09/pen/YzKrjrx

Thanks to hisbvdis for pointing me a way to find an answer

Answered By - Freestyle09