CSSjustify-items Property
Example
Align each grid item at the end of their grid cell, in the inline direction:
display: grid;
justify-items: end;
}
More "Try it Yourself" examples below.
Definition and Usage
Thejustify-items property is set on the grid container to give child elements (grid items) alignment in the inline direction.
For pages in English, inline direction is left to right and block direction is downward.
For this property to have any alignment effect, the grid items need available space around themselves in the inline direction.
Tip: To align grid items in block direction instead of inline direction, usealign-items property.
| Default value: | legacy |
|---|---|
| Inherited: | no |
| Animatable: | no.Read aboutanimatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.justifyItems="center"Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| justify-items | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS Syntax
Property Values
| Value | Description | Play it |
|---|---|---|
| legacy | Default value. Grid items with justify-self value 'auto' only inherits grid container justify-items property value if it starts with 'legacy'. It exists to implement the legacy alignment behavior of HTML's 〈center〉 element and align attribute. | Demo ❯ |
| normal | Dependant on layout context, but similar to 'stretch' for grid layout | Demo ❯ |
| stretch | Stretches to fill the grid cell if inline-size (width) is not set. | Demo ❯ |
| start | Align items at the start in the inline direction | Demo ❯ |
| left | Align items to the left | Demo ❯ |
| center | Align items to the center | Demo ❯ |
| end | Align items at the end in the inline direction | Demo ❯ |
| right | Align items to the right | Demo ❯ |
| overflow-alignment |
| |
| baseline alignment | The element is aligned with the baseline of the parent. | Demo ❯ |
| initial | Sets this property to its default value.Read aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
More Examples
justify-items vs. justify-self
Alignment is set to 'center' from container, and 'right' on the grid item itself. Property value 'right' prevails:
display: grid;
justify-items: center;
}
.blue {
justify-self: right;
}
justify-items on absolutely positioned grid items
Alignment is set to 'right' on absolutely positioned grid items:
display: grid;
position: relative;
justify-items: right;
}
.blue {
position: absolute;
}
writing-mode
With thewriting-mode property value of the grid container element set to vertical-rl, the inline direction is downwards. The result is that the start of the container is moved from left side to top, and the end of the container is moved from right side to bottom:
justify-items: end;
writing-mode: vertical-rl;
}
direction
With thedirection property value of the grid container element set to 'rtl', the inline direction is right to left. The result is that the start of the container is moved from left side to right side, and the end of the container is moved from right side to left side:
justify-items: start;
direction: rtl;
}
Related Pages
CSS tutorial:CSS grid
CSS tutorial:CSS positioning
CSS Reference:align-items property
CSS Reference:direction property
CSS Reference:grid property
CSS Reference:grid-template-columns property
CSS Reference:justify-self property
CSS Reference:position property
CSS Reference:writing-mode property
