Utilities for controlling how grid items are aligned along both the block and inline axis directions.
Use d-plc-stretch{-n} to stretch grid items along the block and inline axis.
<div class="d-d-grid d-g-cols2 d-plc-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-plc-start{-n} to align grid items along the start of the block and/or inline axis.
<div class="d-d-grid d-g-cols2 d-plc-start-center d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate" style="--col-width: 6.4rem;"> <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-plc-end{-n} to align grid items along the end of the block and/or inline axis.
<div class="d-d-grid d-g-cols2 d-plc-end-center d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate" style="--col-width: 6.4rem;"> <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-plc-center{-n} to align grid items along the center of the block and/or inline axis.
<div class="d-d-grid d-g-cols2 d-plc-center d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate" style="--col-width: 6.4rem;"> <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-plc-space-evenly{-n} to distribute grid items evenly along the block axis.
<div class="d-d-grid d-g-cols2 d-plc-space-evenly d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate" style="--col-width: 6.4rem;"> <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-plc-space-around{-n} to distribute grid items so there is an equal amount of space around each row on the block axis.
<div class="d-d-grid d-g-cols2 d-plc-space-around d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate" style="--col-width: 6.4rem;"> <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-plc-space-between{-n} to distribute grid items along the block axis so that there is an equal space between each row.
<div class="d-d-grid d-g-cols2 d-plc-space-between d-g-200 d-w100p d-h-350 d-bar-400 d-bgc-moderate" style="--col-width: 6.4rem;"> <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>
Class
|
Output
|
|---|---|
| .d-plc-center | place-content: center !important |
| .d-plc-center-end | place-content: center end !important |
| .d-plc-center-start | place-content: center start !important |
| .d-plc-center-stretch | place-content: center stretch !important |
| .d-plc-center-space-around | place-content: center space-around !important |
| .d-plc-center-space-evenly | place-content: center space-evenly !important |
| .d-plc-center-space-between | place-content: center space-between !important |
| .d-plc-end-center | place-content: end center !important |
| .d-plc-end | place-content: end !important |
| .d-plc-end-start | place-content: end start !important |
| .d-plc-end-stretch | place-content: end stretch !important |
| .d-plc-end-space-around | place-content: end space-around !important |
| .d-plc-end-space-evenly | place-content: end space-evenly !important |
| .d-plc-end-space-between | place-content: end space-between !important |
| .d-plc-start-center | place-content: start center !important |
| .d-plc-start-end | place-content: start end !important |
| .d-plc-start | place-content: start !important |
| .d-plc-start-stretch | place-content: start stretch !important |
| .d-plc-start-space-around | place-content: start space-around !important |
| .d-plc-start-space-evenly | place-content: start space-evenly !important |
| .d-plc-start-space-between | place-content: start space-between !important |
| .d-plc-stretch-center | place-content: stretch center !important |
| .d-plc-stretch-end | place-content: stretch end !important |
| .d-plc-stretch-start | place-content: stretch start !important |
| .d-plc-stretch | place-content: stretch !important |
| .d-plc-stretch-space-around | place-content: stretch space-around !important |
| .d-plc-stretch-space-evenly | place-content: stretch space-evenly !important |
| .d-plc-stretch-space-between | place-content: stretch space-between !important |
| .d-plc-space-around-center | place-content: space-around center !important |
| .d-plc-space-around-end | place-content: space-around end !important |
| .d-plc-space-around-start | place-content: space-around start !important |
| .d-plc-space-around-stretch | place-content: space-around stretch !important |
| .d-plc-space-around | place-content: space-around !important |
| .d-plc-space-around-space-evenly | place-content: space-around space-evenly !important |
| .d-plc-space-around-space-between | place-content: space-around space-between !important |
| .d-plc-space-evenly-center | place-content: space-evenly center !important |
| .d-plc-space-evenly-end | place-content: space-evenly end !important |
| .d-plc-space-evenly-start | place-content: space-evenly start !important |
| .d-plc-space-evenly-stretch | place-content: space-evenly stretch !important |
| .d-plc-space-evenly-space-around | place-content: space-evenly space-around !important |
| .d-plc-space-evenly | place-content: space-evenly !important |
| .d-plc-space-evenly-space-between | place-content: space-evenly space-between !important |
| .d-plc-space-between-center | place-content: space-between center !important |
| .d-plc-space-between-end | place-content: space-between end !important |
| .d-plc-space-between-start | place-content: space-between start !important |
| .d-plc-space-between-stretch | place-content: space-between stretch !important |
| .d-plc-space-between-space-around | place-content: space-between space-around !important |
| .d-plc-space-between-space-evenly | place-content: space-between space-evenly !important |
| .d-plc-space-between | place-content: space-between !important |
Place Content documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope