Центрирующая сетка ребенка независимо от ширины братьев

Question

У меня есть контейнер с сеткой CSS с 3 дочерними элементами, все с разной шириной.Я хочу, чтобы 2-сторонние дочерние элементы находились с двух сторон контейнера, а средний дочерний элемент был по центру.

Я попытался установить для первого из них justify-self: start, для среднего - justify-self: center;,и последний - justify-self: end;, но он не центрируется, он просто делит пространство равномерно.

.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>

Я что-то упустил?Разве это не возможно?

Answer 1

Используйте 1fr вместо auto, поскольку вы явно определяете ширину ваших элементов

.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>

Answer 2

Вы можете использовать сетку для внешних элементов и центрировать среднюю с использованием абсолютной позиции и преобразовывать ее так:

.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>

Но учтите, что элементы могут перекрываться при использовании этого метода.