Justify Items

Utilities for controlling how grid items align along their inline axis.

Auto

Use d-ji-auto to justify grid items automatically along their inline axis. This is the default value.

<div class="d-d-grid d-g-cols2 d-ji-auto">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Start

Use d-ji-start to justify items against the start of their inline axis. Note that this does not work on flexed objects, only grid objects.

<div class="d-d-grid d-g-cols2 d-ji-start">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

End

Use d-ji-end to justify items against the end of their inline axis. Note that this does not work on flexed objects, only grid objects.

<div class="d-d-grid d-g-cols2 d-ji-end">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Center

Use d-ji-center to justify items to the center of their inline axis.

<div class="d-d-grid d-g-cols2 d-ji-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Classes

Class
Output
.d-ji-center justify-items: center !important;
.d-ji-end justify-items: end !important;
.d-ji-start justify-items: start !important;
.d-ji-left justify-items: left !important;
.d-ji-right justify-items: right !important;
.d-ji-baseline justify-items: baseline !important;
.d-ji-first-baseline justify-items: first-baseline !important;
.d-ji-last-baseline justify-items: last-baseline !important;
.d-ji-stretch justify-items: stretch !important;
.d-ji-safe justify-items: safe !important;
.d-ji-unsafe justify-items: unsafe !important;
.d-ji-normal justify-items: normal !important;
.d-ji-legacy justify-items: legacy !important;
.d-ji-auto justify-items: auto !important;
.d-ji-unset justify-items: unset !important;
Justify Items documentation last updated Thursday, June 11, 2026