Justify Items Property
Last updated: 2026-09-13
justify-items Justify Items Property
The justify-items property sets the default alignment of all items in the inline (row) axis inside the container. It applies mainly to grid layouts and has no effect in flexbox. It is the per-item counterpart of justify-content: it aligns each item within its own grid cell rather than the items as a group. Its default value is stretch, which stretches the items to fill the cell.
| Category | |
|---|---|
| Initial Value | legacy |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
justify-items: normal | stretch | start | end | self-start | self-end | center | left | right | baseline | legacy;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | stretch | start | end | center | left | right | legacy | Keyword | Inline axis alignment of items |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| justify-items | ✓ v29 | ✓ v12 | ✓ v28 | ✓ v9 | ✓ v17 |
| Supported in all major browsers | |||||
Warning： justify-items has no effect in flexbox; it only applies to grid. In a flex layout, use justify-content to align the items.
Tip： The legacy value of justify-items exists for compatibility with older browsers and is meant to be paired with justify-self: legacy. New projects should avoid it.
❓ FAQ
QWhat is the difference between justify-items and justify-content?
Ajustify-items acts on each grid item and controls how the item is aligned inside its own cell along the inline (horizontal) axis. justify-content acts on the whole grid content area and controls how the tracks are distributed inside the container. The two levels are independent and can be combined: justify-content distributes the container’s leftover space, while justify-items aligns each item within its cell.
QWhy doesn’t justify-items work in flexbox?
AFlexbox has no concept of grid cells; the items are placed directly in the container, so justify-items has nothing to apply to. In flexbox, use justify-content to distribute the items along the main axis and align-items to align them on the cross axis. The same applies to align-items and align-self: they serve grid on the block axis and also work in flex, while the justify-* pair is grid-only. justify-items and its per-item form justify-self mainly serve grid layouts.
QHow do I center the content of every grid cell horizontally?
ATwo ways: write justify-items: center on the container to center every grid item horizontally in its cell, or write justify-self: center on a single item. Do not use justify-content: center here - it positions the entire grid content area inside the container. Also remember that the default justify-items: stretch makes the item fill the whole cell, so centering takes effect only once the item is no longer stretched; start or center values let the item shrink to its content width first. To center vertically at the same time, use place-items: center.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Main Axis Alignment
Controls how items align on the main axis
Cross Axis Alignment
Controls how items align on the cross axis
