Dialtone

Justify Self

Utilities for controlling how a grid item is aligned along its inline axis.

Classes

ClassOutput
.d-js-centerjustify-self: center !important;
.d-js-endjustify-self: end !important;
.d-js-startjustify-self: start !important;
.d-js-leftjustify-self: left !important;
.d-js-rightjustify-self: right !important;
.d-js-baselinejustify-self: baseline !important;
.d-js-first-baselinejustify-self: first-baseline !important;
.d-js-last-baselinejustify-self: last-baseline !important;
.d-js-stretchjustify-self: stretch !important;
.d-js-safejustify-self: safe !important;
.d-js-unsafejustify-self: unsafe !important;
.d-js-normaljustify-self: normal !important;
.d-js-legacyjustify-self: legacy !important;
.d-js-autojustify-self: auto !important;
.d-js-unsetjustify-self: unset !important;

Auto

Use d-js-auto to justify an item automatically along its inline axis. This is the default value.

<div class="d-d-grid d-g-cols3">
  <div class="d-js-auto">1</div>
  <div>2</div>
  <div>3</div>
</div>

Start

Use d-js-start to justify an item to the start of its inline axis.

<div class="d-d-grid d-g-cols3">
  <div class="d-js-start">1</div>
  <div>2</div>
  <div>3</div>
</div>

End

Use d-js-end to justify an item to the end of its inline axis.

<div class="d-d-grid d-g-cols3">
  <div class="d-js-end">1</div>
  <div>2</div>
  <div>3</div>
</div>

Center

Use d-js-center to justify an item to the center of its inline axis.

<div class="d-d-grid d-g-cols3">
  <div class="d-js-center">1</div>
  <div>2</div>
  <div>3</div>
</div>
Last Updated: