Layout
justify-items
justify-items sets where grid items sit inside their cells along the inline axis (left to right in horizontal text), for all items at once.
Syntax
normal | stretch | <baseline-position>
| <overflow-position>? [ <self-position> | left | right ]
| legacy | legacy && [ left | right | center ] | anchor-centerPreview
Code
.box {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
}Controls
About
Values
normal: the initial value. For grid items without a set width it works likestretch.stretch: stretches items without a set width across the cell.start,endandcenter: put items at the start, end or middle of the cell along the line. Items shrink to the width of their content.leftandright: put items at the left or right of the cell, whatever the text direction.self-startandself-end: use the item's own text direction to find the start or end.baselineandlast baseline: line up the items in the same column by their text baselines. Horizontal items in a horizontal grid have no baseline running across, sobaselineends up in about the same place asstart.anchor-center: centers an element placed with anchor positioning on its anchor.
Putting safe before center and similar values switches to start when an item is wider than its cell, so its start side does not get cut off. unsafe keeps the alignment even if the item overflows.
How it relates to justify-self
justify-items goes on the container and sets the default (auto) of justify-self for every item inside. To place one item differently, set justify-self on that item. align-items sets the vertical position, and place-items: center centers items both ways at once.
The preview on this page sets display: grid and grid-template-columns: 1fr 1fr as helper declarations, placing four items in two columns of cells.
Where it does nothing
- Flexbox ignores it. Use
justify-contentto arrange items along the line. - The spec also applies it to children of block boxes (
display: block), but only Chrome and Edge 130 and later support that so far.
Not covered on this page
legacy passes the position down to descendants, like HTML's align attribute (as in legacy center). flex-start and flex-end are allowed too, but in a grid they are the same as start and end. The controls on this page don’t cover these, but you can type them into the code.