CSS Grid Center (Justify) Элемент, основанный на ширине строки вместо ширины элемента

Question

Мне интересно, как я могу выровнять элемент с помощью CSS Grid по центру строки, а не только по конкретному элементу. В приведенном ниже фрагменте вы можете видеть, как child2 (красный) центрируется только внутри этого элемента, а не в центре всего ряда - он слишком далеко вправо.

Есть ли способ сделать это?

Вот и скрипка: https://jsfiddle.net/6ytqk7rL/

#parent {
  display:inline-grid;
  width:100%;
  grid-template-columns: [logo] 50px [title] auto;
  justify-items: center;
}
.child {
 background: blue;
 height:30px;
 width:30px;
}
#child2 {
  background: red;
  height: 30px;
  width: 30px;
} 

<div id="parent">
<div id="child1" class="child">

</div>
<div id="child2" class="child">

</div>
</div>

Answer 1

Если вы хотите, чтобы красный квадрат был центральным для всей строки, вам нужно сместить его на ширину первого <div> слева от него.

В качестве элементов текущий ток выглядит следующим образом:

Таким образом, красный квадрат выровнен по центру внутри своего контейнера. Он не может автоматически оценивать свою позицию на основе родителя - в результате, если вы добавите margin-left: -50px, это компенсирует ширину #child1, которую вы определили в grid-templates-columns.