Hey there,
I'm trying to figure out how to eliminate the gap (the orange section) that appears when I set a max-height that is smaller than the space occupied by the top section. I assumed the main section would expand to fill the empty space, but it doesn't seem to be working. Any suggestions on how I can achieve this? I've also tried using the following code without success:
grid-template-rows: 1fr auto 1fr;
Here's the complete code snippet:
.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;
}