Dialtone

Place Items

Utilities for controlling how grid items are aligned along their block and inline axis directions.

Classes

ClassOutput
.d-pli-centerplace-items: center !important;
.d-pli-center-endplace-items: center end !important;
.d-pli-center-startplace-items: center start !important;
.d-pli-center-stretchplace-items: center stretch !important;
.d-pli-end-centerplace-items: end center !important;
.d-pli-endplace-items: end !important;
.d-pli-end-startplace-items: end start !important;
.d-pli-end-stretchplace-items: end stretch !important;
.d-pli-start-centerplace-items: start center !important;
.d-pli-start-endplace-items: start end !important;
.d-pli-startplace-items: start !important;
.d-pli-start-stretchplace-items: start stretch !important;
.d-pli-stretch-centerplace-items: stretch center !important;
.d-pli-stretch-endplace-items: stretch end !important;
.d-pli-stretch-startplace-items: stretch start !important;
.d-pli-stretchplace-items: stretch !important;

Stretch

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">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Start

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">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

End

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">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Center

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">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
Last Updated: