Justify Self

Controls the alignment of a single grid element relative to its inline axis.

Class	Property
js-auto	justify-self: auto;
js-c	justify-self: center;
js-e	justify-self: end;
js-s	justify-self: start;
js-st	justify-self: stretch;

Auto

The alignment of the grid item is determined by the justify-items value of the grid container.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 js-auto tc-white">
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">A</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">B</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">C</div>
  </div>
</div>

Center

Aligns the grid item to the center of its grid cell.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 js-c tc-white">
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">A</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">B</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">C</div>
  </div>
</div>

End

Aligns the grid item to the end of its grid cell.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 tc-white">
    <div class="ai-c bg-indigo d-f dim-14 js-e rad-2">A</div>
    <div class="ai-c bg-indigo d-f dim-14 js-e rad-2">B</div>
    <div class="ai-c bg-indigo d-f dim-14 js-e rad-2">C</div>
  </div>
</div>

Start

Aligns the grid item to the start of its grid cell.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 js-s tc-white">
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">A</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">B</div>
    <div class="ai-c bg-indigo d-f dim-14 jc-c rad-2">C</div>
  </div>
</div>

Stretch

Stretches the grid item to fill its grid cell.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 js-st tc-white">
    <div class="ai-c bg-indigo d-f h-14 jc-c rad-2">A</div>
    <div class="ai-c bg-indigo d-f h-14 jc-c rad-2">B</div>
    <div class="ai-c bg-indigo d-f h-14 jc-c rad-2">C</div>
  </div>
</div>

---

Using responsive modifiers

Using responsive breakpoints like sm:js-*, md:js-*, lg:js-*, and xxl:js-* allows targeting specific utilities in different viewports.

<div class="js-s md:js-e ..."></div>

Using hover modifiers

Using :hover modifiers such as h:js-* allows you to override elements and change their values when hovering over them.

<div class="js-s h:js-e ..."></div>