Layout
place-items
place-items is a shorthand for align-items (vertical position) and justify-items (horizontal position). place-items: center puts grid items in the middle of their cells both ways.
Syntax
<'align-items'> <'justify-items'>?Preview
Code
.box {
display: grid;
grid-template-columns: 1fr 1fr;
place-items: center;
}Controls
About
Values
Write the align-items value and then the justify-items value, separated by a space (place-items: end center). With one value, both get it. The values are the same as for each property, including two-word values such as safe center and last baseline.
A common pattern
display: grid and place-items: center center what is inside a box both ways in two lines. With a single item, its cell fills the box, so the item ends up in the middle of the box.
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. The items move inside their cells both vertically and horizontally.
In a flexbox
Flexbox ignores justify-items, so only the first value (align-items) has an effect. Use justify-content for the horizontal position. To center, use place-content: center, or justify-content: center with align-items: center.