'How to align content in different columns of grid

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


Solution 1:[1]

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

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

Solution 2:[2]

  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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 John Glabb
Solution 2 Henry Ecker

Related Questions