Place 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;

Overview

Use place-items utilities on CSS Grid containers as a shorthand to set both align-items and justify-items at once. This property controls how grid items are positioned within their grid areas on both axes.

Basic usage

Use place-items utilities to control the alignment of grid items. Choose from start, end, center, or stretch (browser default).

Grid item

HTML

<div class="d-grid place-items-start">...</div>
<div class="d-grid place-items-end">...</div>
<div class="d-grid place-items-center">...</div>
<div class="d-grid place-items-stretch">...</div>

Responsive

Responsive variations also exist for place-items.

.place-items-start
.place-items-end
.place-items-center
.place-items-stretch
.place-items-sm-start
.place-items-sm-end
.place-items-sm-center
.place-items-sm-stretch
.place-items-md-start
.place-items-md-end
.place-items-md-center
.place-items-md-stretch
.place-items-lg-start
.place-items-lg-end
.place-items-lg-center
.place-items-lg-stretch
.place-items-xl-start
.place-items-xl-end
.place-items-xl-center
.place-items-xl-stretch
.place-items-2xl-start
.place-items-2xl-end
.place-items-2xl-center
.place-items-2xl-stretch

CSS

Sass utilities API

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

SCSS

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