如何使用css网格将内容放在列的右侧

如何解决如何使用css网格将内容放在列的右侧

我有一个包含两个内容的 6 列 css 网格：

一个从第 2 列到第 5 列，另一个从第 5 列到第 7 列

这就是我在 Firefox 上得到的：

虽然它看起来像我期望的那样，但在其他浏览器上看起来不一样，这里有一个关于 chorme 的例子（但它在所有浏览器中看起来都一样）：

如何让粉红色的内容在所有浏览器中看起来都像 firefox：

这是我的实际代码：

main {
  display: grid;
  height: 100vh;
  place-items: center;
  margin-top: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(6,1fr);
}

.sidebar {
  grid-column-start: 5;
  grid-column-end: 7;
}

.content {
  grid-column-end: 5;
  grid-column-start: 2;
}

<main>
  <div class="wrapper">
    <div class="sidebar">...</div>
    <div class="content">...</div>
  </div>
</main>

有什么建议可以让所有浏览器看起来都像 Firefox？

解决方法

justify-self 应该这样做

.sidebar {
  grid-column-start: 5;
  grid-column-end: 7;
  justify-self: end;
}