CSS propertyGrid

justify-items

Aligns all items within their cells along the horizontal axis.

Initial value: legacy
Inherited: No
Animatable: no
Applies to: all elements, the effect shows up in grid containers
JavaScript: element.style.justifyItems = "center"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}

Preview

Definition and usage

The justify-items property is set on a grid container. It decides how each item sits inside its cell horizontally: stretching across the full width of the cell, hugging the left or right side, or sitting in the center.

By default, grid items stretch. Switching to start or center makes an item only as wide as its content, leaving the rest of the cell empty.

This property doesn’t work in Flexbox, because there, items are positioned on the main axis with justify-content and margins.

Syntax

justify-items: normal | stretch | start | end | center | legacy;

Values

stretch
Items fill the full width of their cells.
start
Items hug the left edge of their cells.
center
Items sit in the center of their cells.
end
Items hug the right edge of their cells.

Value	Description
stretch	Items fill the full width of their cells.
start	Items hug the left edge of their cells.
center	Items sit in the center of their cells.
end	Items hug the right edge of their cells.

Values in practice

stretch

Items fill the full width of their cells.

.demo { justify-items: stretch; }

start

Items hug the left edge of their cells.

.demo { justify-items: start; }

center

Items sit in the center of their cells.

.demo { justify-items: center; }

end

Items hug the right edge of their cells.

.demo { justify-items: end; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

To align one item differently from the rest, use justify-self on that item.
The place-items shorthand sets align-items and justify-items at once.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course