Justify Self

Align individual grid items horizontally.

Preview

Code

<style>
.container{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
background:#e5e7eb;
}

.item{
background:#ef4444;
color:white;
padding:20px;
}

.right{
justify-self:end;
}
</style>

<div class="container">
<div class="item">Left</div>
<div class="item right">Right</div>
</div>

More Grid Items Examples (8)

Basic Grid Item Placement