Justify Items

Controls the alignment of grid elements relative to their inline axis.

Class	Property
ji-c	justify-items: center;
ji-e	justify-items: end;
ji-s	justify-items: start;
ji-st	justify-items: stretch;

Controls the alignment of grid items along the inline axis within their grid areas.

Center

Aligns grid items to the center of their grid area.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 ji-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 grid items to the end of their grid area.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 ji-e 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>

Start

Aligns grid items to the start of their grid area.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 ji-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 grid items to fill their grid area.

A

B

C

<div class="ovf-auto p-8 p-r rad-2">
  <div class="stripes d-g g-4 gtc-3 ji-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:ji-*, md:ji-*, lg:ji-*, and xxl:ji-* allows targeting specific utilities in different viewports.

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

Using hover modifiers

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

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