Dialtone

Place Content

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

Classes

ClassOutput
.d-plc-centerplace-content: center !important
.d-plc-center-endplace-content: center end !important
.d-plc-center-startplace-content: center start !important
.d-plc-center-stretchplace-content: center stretch !important
.d-plc-center-space-aroundplace-content: center space-around !important
.d-plc-center-space-evenlyplace-content: center space-evenly !important
.d-plc-center-space-betweenplace-content: center space-between !important
.d-plc-end-centerplace-content: end center !important
.d-plc-endplace-content: end !important
.d-plc-end-startplace-content: end start !important
.d-plc-end-stretchplace-content: end stretch !important
.d-plc-end-space-aroundplace-content: end space-around !important
.d-plc-end-space-evenlyplace-content: end space-evenly !important
.d-plc-end-space-betweenplace-content: end space-between !important
.d-plc-start-centerplace-content: start center !important
.d-plc-start-endplace-content: start end !important
.d-plc-startplace-content: start !important
.d-plc-start-stretchplace-content: start stretch !important
.d-plc-start-space-aroundplace-content: start space-around !important
.d-plc-start-space-evenlyplace-content: start space-evenly !important
.d-plc-start-space-betweenplace-content: start space-between !important
.d-plc-stretch-centerplace-content: stretch center !important
.d-plc-stretch-endplace-content: stretch end !important
.d-plc-stretch-startplace-content: stretch start !important
.d-plc-stretchplace-content: stretch !important
.d-plc-stretch-space-aroundplace-content: stretch space-around !important
.d-plc-stretch-space-evenlyplace-content: stretch space-evenly !important
.d-plc-stretch-space-betweenplace-content: stretch space-between !important
.d-plc-space-around-centerplace-content: space-around center !important
.d-plc-space-around-endplace-content: space-around end !important
.d-plc-space-around-startplace-content: space-around start !important
.d-plc-space-around-stretchplace-content: space-around stretch !important
.d-plc-space-aroundplace-content: space-around !important
.d-plc-space-around-space-evenlyplace-content: space-around space-evenly !important
.d-plc-space-around-space-betweenplace-content: space-around space-between !important
.d-plc-space-evenly-centerplace-content: space-evenly center !important
.d-plc-space-evenly-endplace-content: space-evenly end !important
.d-plc-space-evenly-startplace-content: space-evenly start !important
.d-plc-space-evenly-stretchplace-content: space-evenly stretch !important
.d-plc-space-evenly-space-aroundplace-content: space-evenly space-around !important
.d-plc-space-evenlyplace-content: space-evenly !important
.d-plc-space-evenly-space-betweenplace-content: space-evenly space-between !important
.d-plc-space-between-centerplace-content: space-between center !important
.d-plc-space-between-endplace-content: space-between end !important
.d-plc-space-between-startplace-content: space-between start !important
.d-plc-space-between-stretchplace-content: space-between stretch !important
.d-plc-space-between-space-aroundplace-content: space-between space-around !important
.d-plc-space-between-space-evenlyplace-content: space-between space-evenly !important
.d-plc-space-betweenplace-content: space-between !important

Stretch

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

Start

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-cols3 d-plc-start-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

End

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-cols3 d-plc-end-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Center

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-cols3 d-plc-center">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Space Evenly

Use d-plc-space-evenly{-n} to distribute grid items evenly along the block axis.

<div class="d-d-grid d-g-cols3 d-plc-space-evenly">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Space Around

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-cols3 d-space-around">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Space Between

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-cols3 d-plc-space-between">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
Last Updated: