CSS justify-items property

Definition and Usage

The justify-items attribute is set on the grid container to align the child elements (grid items) in the inline direction.

For English pages, the inline direction is from left to right, and the block direction is downward.

For this attribute to have any alignment effect, the grid item must leave available space around itself in the inline direction.

Tip:To align grid items in the block direction instead of the inline direction, use align-items attribute properties.

See also:

CSS Tutorial:CSS Grid

CSS Tutorial:CSS Positioning

CSS Reference Manual:align-items attribute

CSS Reference Manual:direction attribute

CSS Reference Manual:grid attribute

CSS Reference Manual:grid-template-columns attribute

CSS Reference Manual:justify-self attribute

CSS Reference Manual:position attribute

CSS Reference Manual:writing-mode attribute

Instance

Example 1

Align each grid item at the end of its grid cell along the inline direction:

#container {
  display: grid;
  justify-items: end;
}

Try it yourself

Example 2: Comparison of justify-items and justify-self

Set the alignment method relative to the container to 'centered', and set the grid item itself to 'right-aligned'. The attribute value 'right' takes precedence:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

Try it yourself

Example 3: Set justify-items on an absolutely positioned grid item

Set the alignment method of the grid item with absolute positioning to 'right-aligned':

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

Try it yourself

Example 4: writing-mode

When the writing-mode attribute value of the grid container element is set to vertical-rl, the inline direction is downward. The result is that the starting point of the container moves from the left to the top, and the end point of the container moves from the right to the bottom:

#container {
  justify-items: end;
  writing-mode: vertical-rl;
}

Try it yourself

Example 5: direction

When the direction attribute value of the grid container element is set to 'rtl', the inline direction is from right to left. The result is that the container's starting point moves from the left to the right, and the container's end moves from the right to the left:

#container {
  justify-items: start;
  direction: rtl;
}

Try it yourself

CSS syntax

justify-items: legacy|normal|stretch|Positional alignment|overflow-alignment|Baseline alignment|initial|inherit;

Property value

Value Description
legacy

Default value.

Only when the justify-self value of the grid item is 'auto' and starts with 'legacy', does the grid item inherit the justify-items property value of the grid container.

It exists to implement the legacy alignment behavior of the HTML <center> element and align attribute.
normal Depends on the layout context, but similar to the 'stretch' of grid layout.
stretch If inline-size (width) is not set, it stretches to fill the grid cell.
start Aligns the item at the beginning of the inline direction.
left Aligns the item to the left.
center Aligns the item to the center.
end Aligns the item at the end of the inline direction.
right Aligns the item to the right.
overflow-alignment
  • 'safe' will set the alignment of the item to 'start' if the content overflows.
  • 'unsafe' maintains the alignment value regardless of whether the content of the item overflows.
baseline-alignment The element is aligned with the baseline of its parent element.
initial Set this property to its default value. See initial.
inherit This property is inherited from its parent element. See inherit.

Technical details

Default value: legacy
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript syntax: object.style.justifyItems="center"

Browser support

The numbers in the table indicate the browser version that first fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0