Centering grid child regardless of siblings width

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?

here is with flexbox: https://stackoverflow.com/a/55393886/8620333 (with grid, simply replace auto by 1fr) — Temani Afif, May 15 '19 at 21:11
The problem is that the rendering engine doesn't know what to align the center column _to_. There's no concept of "center" with respect to the sibling elements, only to the parent. — isherwood, May 15 '19 at 21:16
That's exactly what I want, I want it to be centered in respect to the parent and ignore the fact that this will make it have unequal gaps between the siblings — Mendy, May 15 '19 at 21:21
flexbox solution: https://stackoverflow.com/questions/43211390/ — kukkuz, May 16 '19 at 02:04

score 1 · Answer 1 · answered May 15 '19 at 21:10

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.

Temani Afif · Answer 2 · 2020-02-08T00:11:23.830

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>

Centering grid child regardless of siblings width

2 Answers2