Justify self

Utility classes for justifying grid items along its inline axis.

Class nameProperties
.justify-self-centerjustify-self: center;
.justify-self-endjustify-self: flex-end;
.justify-self-startjustify-self: flex-start;
.justify-self-stretchjustify-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