您可以选择网格中的项目，并使其分别显示：根据需要向左或向右调整其内容。
这是一个两列网格的简单代码片段。它给出的颜色只是为了演示，这样你就可以看到对齐是正确的。

.grid {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-gap: 2px;
  width: 90vw;
  background: black;
}

.grid>* {
  display: flex;
  background: cyan;
}

.grid>*:nth-child(1) {
  justify-content: left;
  background: yellow;
}

.grid>*:nth-child(2) {
  justify-content: right;
}

<div class="grid">
  <div>Column1<br>content</div>
  <div>Column2<br>content</div>
</div>

好的......对于第二列DIV，我刚刚设置：

<div style={{justifySelf: 'end'}}>

1.将网格创建为容器
1.然后创建两个不同的div，一个用于左侧，一个用于右侧
1.然后对齐内容
所以看起来

<div className="container">
  <div className="left"></div>
  <div className="right"></div>
</div>

然后将文本在左div上左对齐，在右div上右对齐。