基于行宽度而不是项目宽度的CSS网格中心（调整）项目

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宽度。