Justify self
Utility classes for justifying grid items along its inline axis.
Class name | Properties |
---|---|
.justify-self-center | justify-self: center; |
.justify-self-end | justify-self: flex-end; |
.justify-self-start | justify-self: flex-start; |
.justify-self-stretch | justify-self: stretch; |
Center
Use .justify-self-center
to center grid item along it's inline axis.
<div class="grid grid-cols-3...">
<span class="item col-span-1..."><span>
<span class="item col-span-1 justify-self-center..."><span>
<span class="item cols-span-1..."><span>
</div>
1
End
Use .justify-self-end
to align grid item at the end of it's inline axis.
<div class="grid grid-cols-3...">
<span class="item col-span-1..."><span>
<span class="item col-span-1 justify-self-end..."><span>
<span class="item cols-span-1..."><span>
</div>
1
Start
Use .justify-self-start
to align grid item at the start of it's inline axis.
<div class="grid grid-cols-3...">
<span class="item col-span-1..."><span>
<span class="item col-span-1 justify-self-start..."><span>
<span class="item cols-span-1..."><span>
</div>
1
Stretch
Use .justify-self-stretch
to stretch grid item to fill he grid area.
<div class="grid grid-cols-3...">
<span class="item col-span-1..."><span>
<span class="item col-span-1 justify-self-stretch..."><span>
<span class="item cols-span-1..."><span>
</div>
1