Justify Self

Utilities for controlling the alignment of individual grid items along the inline (row) axis.

Class Name	CSS Equivalent
justify-self-start	justify-self: start;
justify-self-center	justify-self: center;
justify-self-end	justify-self: end;
justify-self-stretch	justify-self: stretch;
justify-self-auto	justify-self: auto;

Justify Self Start

The .justify-self-start class sets the justify-self property to start, aligning the individual grid item along the inline (row) axis at the start.

<div class="grid grid-cols-3  justify-items-stretch gap-s">
  <div class="[...]">1</div>
  <div class="[...] justify-self-start">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>

1

2

3

4

5

6

Justify Self Center

The .justify-self-center class sets the justify-self property to center, aligning the individual grid item along the inline (row) axis at the center.

<div class="grid grid-cols-3  justify-items-stretch gap-s">
  <div class="[...]">1</div>
  <div class="[...] justify-self-center">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>

1

2

3

4

5

6

Justify Self End

The .justify-self-end class sets the justify-self property to end, aligning the individual grid item along the inline (row) axis at the end.

<div class="grid grid-cols-3  justify-items-stretch gap-s">
  <div class="[...]">1</div>
  <div class="[...] justify-self-end">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>

1

2

3

4

5

6

Justify Self Stretch

The .justify-self-stretch class sets the justify-self property to stretch, allowing the individual grid item to stretch along the inline (row) axis.

<div class="grid grid-cols-3  justify-items-stretch gap-s">
  <div class="[...]">1</div>
  <div class="[...] justify-self-stretch">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>

1

2

3

4

5

6

Justify Self Auto

The .justify-self-auto class sets the justify-self property to auto, allowing the individual grid item to size and position itself based on its content.

<div class="grid grid-cols-3  justify-items-stretch gap-s">
  <div class="[...]">1</div>
  <div class="[...] justify-self-auto">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>

1

2

3

4

5

6