How to grow a CSS row to prevent gaps when using max-height

Hello,

I wanted to get rid of the gap (the orange section) that shows up because i set max-height that is less than the space occuped by the top section, i thought main section would stretch but it doesn't. Any idea how i can do that? doing this does not work either:

grid-template-rows: 1fr auto 1fr;

complete code:

    .gridcontainer {
        background-color: orange;
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-template-columns: 2fr 6fr 2fr;
        grid-template-rows: 1fr 8fr 1fr;
    }
    
    .gridchild-header {
        grid-area: 1 / 1 / 2 / 4;
        background-color: yellow;
        z-index: 500;
        min-height: 50px;
        max-height: 100px;
    }
    
    .gridchild-main {
        grid-area: 2 / 1 / 3 / 3;
        background-color: cyan;
        z-index: 500;
    }
    
    .gridchild-sidebar {
        grid-area: 2 / 3 / 3 / 4;
        background-color: red;
        z-index: 500;
    }
    
    .gridchild-footer {
        grid-area: 3 / 1 / 4 / 4;
        background-color: purple;
        z-index: 500;
        min-height: 100px;
    }

the gap in the orange section that appears when you set a max-height on the top section (header), you'll need to make sure that the grid layout adapts dynamically to the height changes. The gap happens because when the header does not occupy the full height defined in the grid, the main section does not automatically stretch to fill the remaining space.

Please try any of the below approaches. I think this will help you to solve the problem.

Set the header's row height to auto to allow it to adjust based on its content without creating gaps.

.gridcontainer {
    background-color: orange;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    grid-template-rows: auto 1fr auto; /* Adjusted */
}

If you still want to control the maximum height of the header while allowing the main section to grow, use the minmax function:

.gridcontainer {
    background-color: orange;
    height: 100vh;
    width: 100vw;
    display: grid;
    grid-template-columns: 2fr 6fr 2fr;
    grid-template-rows: minmax(50px, 100px) 1fr auto; /* Adjusted */
}