display: grid aligning divs - html

Question

I have 3 divs in 3 columns of a grid and I want the middle div to stay static when zoomed in. The one on the right and left growing with the zoom
HTML
<mdiv class="dvCenter">
<div class="dvCenter1"></div>
<div class="dvCenter2"></div>
<div class="dvCenter3"></div>
</div>
CSS
.dvCenter{
background-color: black;
height: 110px;
align-items: center;
display: grid;
grid-template-columns: 40% 20% 40%;
grid-template-rows: 100%;
}
.dvCenter1{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 1;
}
.dvCenter2{
background-color: brown;
height: 100%;
grid-row: 1;
grid-column: 2;
}
.dvCenter3{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 3;
}

Answer 1

I think what you want is to have the page start by having the .dvCenter2 div to have 20% width and then stays as the current width when the page grows. But % is a relative unit and when the screen grows bigger, the 20% is also bigger than the original 20%.
I can't think of a pure CSS way to do this but you can use javascript to query the current size of the container and modify the grid-template-column. Check the demo below. Hope this helps!
$(".dvCenter").css("grid-template-columns", "1fr " + $(".dvCenter2").width() + "px 1fr");
$("#btn").click(function() {
$(".dvCenter").toggleClass("enlarge");
});
.dvCenter{
background-color: black;
height: 110px;
width: 50%;
align-items: center;
display: grid;
grid-template-columns: 1fr 20% 1fr;
grid-template-rows: 100%;
}
.dvCenter1{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 1;
}
.dvCenter2{
background-color: brown;
height: 100%;
grid-row: 1;
grid-column: 2;
}
.dvCenter3{
background-color: blue;
height: 80%;
grid-row: 1;
grid-column: 3;
}
.enlarge {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<mdiv class="dvCenter">
<div class="dvCenter1"></div>
<div class="dvCenter2"></div>
<div class="dvCenter3"></div>
</div>
<button id="btn">Click to resize container</button>