Dialtone

Place Self

Utilities for controlling a grid item's alignment along their block and inline axis directions.

Classes

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

Stretch

Use d-pls-stretch{-n} to stretch grid items along their block and inline axis.

<div class="d-d-grid d-g-cols2">
  <div class="d-pls-stretch">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Start

Use d-pls-start{-n} to align a grid item along the start of their block and/or inline axis.

<div class="d-d-grid d-g-cols2">
  <div class="d-pls-start">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

End

Use d-pls-end{-n} to align a grid item along the end of their block and/or inline axis.

<div class="d-d-grid d-g-cols2">
  <div class="d-pls-stretch">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Center

Use d-pls-center{-n} to align a grid item along the center of their block and/or inline axis.

<div class="d-d-grid d-g-cols2">
  <div class="d-pls-center">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
Last Updated: