How to make divs not move during zooming in grid layout - html

Question

I have the problem during zooming in browser. I split "details__view" to two grid columns but during zooming these columns do not keep their position and width. I tried to use position: absolute, and position:relative but then the division into columns completely disappears. Here is my html:
<div className="box__details">
<div className="details__container">
<div className="details__container--title">Details</div>
<div className="details__view">
<div className="label">Name</div>
<div className="value">XYZ</div>
</div>
<div className="details__view">
<div className="label">Second Name</div>
<div className="value">XYZ</div>
</div>
<div className="details__view">
<div className="label">Country</div>
<div className="value">XYZ</div>
</div>
</div>
</div>
and CSS:
.box__details {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
.details__container {
border: 1px solid #eee;
padding: 10px;
border: 1px solid #eee;
}
.details__container--title {
padding-bottom: 15px;
}
.details__view {
display: grid;
grid-template-columns: .4fr .4fr;
padding-bottom: 15px;
}
.label {
padding-left: 5px;
}
.value {
text-align: left;
}
Do you have any ideas how can I make labels and values ​​do not change during zooming? Thank you in advance for help!

Answer 1

The columns do not keep their position because you're using fr. This makes the box stay in the place you put it in on the screens proportion thus moving the right a little left when zooming in (Kinda like using %). To make it stay in place you may have to use something like px;
By changing grid-template-columns: 1fr 1fr; to something like grid-template-columns: 427px 427px;