如何对齐网格不同列中的内容

Question

这是我的简单网格：

  display: grid;
  grid-template-columns: 70% 30%;
  grid-gap: 2px;

因此，在第一列中，我想将内容左对齐，在第二列中，我想将内容右对齐：

|Column1             |     Column2|
|content             |     content|

Answer 1

您可以选择网格中的项目并使它们分别显示：根据需要将其内容向左或向右弯曲和对齐。

这是两列网格的简单 sn-p。它只为演示提供颜色，因此您可以看到对齐是正确的。

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

Answer 2

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

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

Answer 3

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

   所以它看起来像

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

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