Dialtone

Justify Items

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

Classes

ClassOutput
.d-ji-centerjustify-items: center !important;
.d-ji-endjustify-items: end !important;
.d-ji-startjustify-items: start !important;
.d-ji-leftjustify-items: left !important;
.d-ji-rightjustify-items: right !important;
.d-ji-baselinejustify-items: baseline !important;
.d-ji-first-baselinejustify-items: first-baseline !important;
.d-ji-last-baselinejustify-items: last-baseline !important;
.d-ji-stretchjustify-items: stretch !important;
.d-ji-safejustify-items: safe !important;
.d-ji-unsafejustify-items: unsafe !important;
.d-ji-normaljustify-items: normal !important;
.d-ji-legacyjustify-items: legacy !important;
.d-ji-autojustify-items: auto !important;
.d-ji-unsetjustify-items: unset !important;

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>
Last Updated: