CSS justify-items Property
Example
Align each grid item at the end of their grid cell, in the inline direction:
#container
{
display: grid;
justify-items: end;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The justify-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, use align-items
property.
Default value: | legacy |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
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
justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;
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 about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
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:
#container
{
display: grid;
justify-items: center;
}
.blue
{
justify-self: right;
}
Try it Yourself »
justify-items on absolutely positioned grid items
Alignment is set to 'right' on absolutely positioned grid items:
#container
{
display: grid;
position: relative;
justify-items: right;
}
.blue
{
position: absolute;
}
Try it Yourself »
writing-mode
With the writing-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:
#container {
justify-items: end;
writing-mode: vertical-rl;
}
Try it Yourself »
direction
With the direction
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:
#container {
justify-items: start;
direction: rtl;
}
Try it Yourself »
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