Justify items

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;

Overview

Use justify-items utilities on CSS Grid containers to change the alignment of grid items along the inline (row) axis. This property controls how grid items are positioned horizontally within their grid areas.

Basic usage

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

Grid item

HTML

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

Responsive

Responsive variations also exist for justify-items.

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

CSS

Sass utilities API

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