CSS justify-items ιδιότητα

Definition and Usage

The justify-items attribute is set on the grid container to align 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: Setting 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;

Attribute 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 attribute 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 items at the beginning of the inline direction.
left Aligns the items to the left.
center Aligns the items to the center.
end Aligns the items at the end of the inline direction.
right Aligns the items to the right.
overflow-alignment
  • 'safe' sets the alignment of the items to 'start' if the content overflows.
  • 'unsafe' maintains the alignment value regardless of whether the content of the items overflows.
baseline-alignment Aligns the element's baseline with the parent element's baseline.
initial Sets this property to its default value. See initial.
inherit Inherits this property 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 first browser version to fully support this property.

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