React Place items Utilities

Place items

Set both grid axes at once — the shorthand for align-items and justify-items.

Class	Styles
.place-items-start	place-items: start;
.place-items-end	place-items: end;
.place-items-center	place-items: center;
.place-items-stretch	place-items: stretch;

On this page

Place items

.place-items-{start|end|center|stretch} sets both axes at once — it is the shorthand for align-items and justify-items together.

<div className="d-grid grid-cols-3 place-items-center gap-3" style={{ height: '120px' }}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<div className="d-grid grid-cols-3 place-items-center gap-3" style={{ height: '120px' }}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Customizing

Sass variables

Place 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,
  )
),