I have a grid layout with 3 sections. My goal is to make the middle "map" section resizable so that when it's shrunk, the "points" section expands to fill up the remaining space.
#grid {
display: grid;
grid-template-rows: 1fr 6fr 2fr;
grid-template-areas:
"slider"
"map"
"points";
width: 200px;
height: calc(100vh - 10px);
}
.one {
grid-area: slider;
background-color: yellow;
}
.three {
grid-area: points;
background-color: green;
}
.resizeme {
grid-area: map;
resize: vertical;
overflow: auto;
background-color: orange;
}<div id="grid">
<div id="item1" class="one">hello1</div>
<div id="item2" class="resizeme">you can resize me</div>
<div id="item3" class="three">three</div>
</div>