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:
- Create the grid as a container
- Then create two different divs, one for the left side and one for the right side
- 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.