Utilities for controlling how grid items are aligned along their block and inline axis directions.
Use d-pli-stretch{-n} to stretch grid items along their block and inline axis.
<div class="d-d-grid d-g-cols2 d-pli-stretch d-g-200 d-w100p d-hmn-350 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate-opaque d-bar-300">4</dt-stack> </div>
Use d-pli-start{-n} to align grid items along the start of their block and/or inline axis.
<div class="d-d-grid d-g-cols2 d-pli-start d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">4</dt-stack> </div>
Use d-pli-end{-n} to align grid items along the end of their block and/or inline axis.
<div class="d-d-grid d-g-cols2 d-pli-end d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">4</dt-stack> </div>
Use d-pli-center{-n} to align grid items along the center of their block and/or inline axis.
<div class="d-d-grid d-g-cols2 d-pli-center d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-size-100 d-bgc-moderate-opaque d-bar-300">4</dt-stack> </div>
Class
|
Output
|
|---|---|
| .d-pli-center | place-items: center !important; |
| .d-pli-center-end | place-items: center end !important; |
| .d-pli-center-start | place-items: center start !important; |
| .d-pli-center-stretch | place-items: center stretch !important; |
| .d-pli-end-center | place-items: end center !important; |
| .d-pli-end | place-items: end !important; |
| .d-pli-end-start | place-items: end start !important; |
| .d-pli-end-stretch | place-items: end stretch !important; |
| .d-pli-start-center | place-items: start center !important; |
| .d-pli-start-end | place-items: start end !important; |
| .d-pli-start | place-items: start !important; |
| .d-pli-start-stretch | place-items: start stretch !important; |
| .d-pli-stretch-center | place-items: stretch center !important; |
| .d-pli-stretch-end | place-items: stretch end !important; |
| .d-pli-stretch-start | place-items: stretch start !important; |
| .d-pli-stretch | place-items: stretch !important; |
Place Items documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope