Vue Justify items Utilities

Justify items

Set the inline-axis alignment for every item in a grid container, or override it for one.

Class	Styles
.justify-items-start	justify-items: start;
.justify-items-end	justify-items: end;
.justify-items-center	justify-items: center;
.justify-items-stretch	justify-items: stretch;
.justify-self-start	justify-self: start;
.justify-self-end	justify-self: end;
.justify-self-center	justify-self: center;

On this page

Justify items

.justify-items-{start|end|center|stretch} sets the inline-axis alignment for every item in the container.

vue

<div class="d-grid grid-cols-3 justify-items-center gap-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Justify self

.justify-self-{start|end|center} overrides that alignment for one item.

Pushed to the end

vue

<div class="d-grid grid-cols-3 justify-items-start gap-3">
  <div>1</div>
  <div class="justify-self-end">Pushed to the end</div>
  <div>3</div>
</div>

Customizing

Sass variables

Justify items utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss

"justify-items": (
  responsive: true,
  property: justify-items,
  values: (
    start: start,
    end: end,
    center: center,
    stretch: stretch,
  )
),
"justify-self": (
  responsive: true,
  property: justify-self,
  values: (
    start: start,
    end: end,
    center: center,
  )
),
"place-items": (
  responsive: true,
  property: place-items,
  values: (
    start: start,
    end: end,
    center: center,
    stretch: stretch,
  )
),