Utilities for controlling how grid items align along their inline axis.
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-200 d-g-cols2 d-ji-auto d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">4</dt-stack> </div>
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-200 d-g-cols2 d-ji-start d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">4</dt-stack> </div>
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-200 d-g-cols2 d-ji-end d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">4</dt-stack> </div>
Use d-ji-center to justify items to the center of their inline axis.
<div class="d-d-grid d-g-200 d-g-cols2 d-ji-center d-w100p d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-wmn-100 d-bgc-moderate-opaque d-bar-300">4</dt-stack> </div>
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 Deprecated | justify-items: left !important; |
| .d-ji-right Deprecated | 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 Friday, September 4, 2026
fix/popover-modal-zindex-scope