Here is my simple grid:

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

So in first column I'd like to align content left and in second column I'd like to align content right:

|Column1             |     Cloumn2|
|content             |     content|

CodePudding user response：

You can select the items in the grid and make them each display: flex and justify their content to left or right as required.

Here is a simple snippet for a two column grid. It gives colors just for demo so you can see the alignment is correct.

.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 >
  <div>Column1<br>content</div>
  <div>Column2<br>content</div>
</div>

CodePudding user response：

Ok.. for the second column DIV I just set:

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

CodePudding user response：

1. Create the grid as a container
2. Then create two different divs, one for the left side and one for the right side
3. then align content

So it would look like

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

and then align the text to the left on the left div, right on the right div.