Centering grid child regardless of siblings width - html

Question

I have a CSS grid container with 3 children, all with a different width. I want the 2 side children to be at the 2 sides of the container and the middle child to be at the center.
I tried setting the first one to justify-self: start, the middle one to justify-self: center;, and the last one to justify-self: end;, but it doesn't get centered, it just divides the space evenly.
.container {
display: grid;
grid-template-columns: auto auto auto;
height: 100px;
}
.first {
justify-self: start;
background-color: red;
width: 50px;
}
.middle {
justify-self: center;
background-color: green;
width: 70px;
}
.last {
justify-self: end;
background-color: blue;
width: 200px;
}
<div class="container">
<div class="first"></div>
<div class="middle">Center me</div>
<div class="last"></div>
</div>
Am I'm missing something? Is this not possible?

Answer 1

You could use the grid for the outer elements and center the middle one using absolute position and transforms like so:
.container {
display: grid;
grid-template-columns: auto auto;
height: 100px;
position:relative;
width:100%;
}
.first {
justify-self: start;
background-color: red;
width: 50px;
}
.middle {
background-color: green;
width: 70px;
position:absolute;
left: 50%;
transform: translateX(-50%);
height:100%;
}
.last {
justify-self: end;
background-color: blue;
width: 200px;
}
<div class="container">
<div class="first"></div>
<div class="middle">Center me</div>
<div class="last"></div>
</div>
But be aware that elements could overlap using this method.

Answer 2

Use 1fr instead of auto since you are explicitly defining the width of your elements
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100px;
/* The center */
padding-bottom: 5px;
background: linear-gradient(black, black) bottom center/5px 5px no-repeat;
}
.first {
justify-self: start;
background-color: red;
width: 50px;
}
.middle {
justify-self: center;
background-color: green;
width: 70px;
}
.last {
justify-self: end;
background-color: blue;
width: 200px;
}
<div class="container">
<div class="first"></div>
<div class="middle">Center me</div>
<div class="last"></div>
</div>