place-items
Sets `align-items` and `justify-items` at once.
Syntax
place-items: align justify;Values
| Parameter | Type | Description |
|---|---|---|
| center | keyword | One value for both directions. |
| align justify | keyword | Two values: vertical, then horizontal. |
Examples
The shortest way to center something:
<div style="display: grid; place-items: center; height: 120px; background: honeydew;">
Centered with one line
</div>Notes
display: grid; place-items: center centers content both ways. In flexbox justify-items does not exist, so there use justify-content and align-items.
See also
- align-items — Aligns items across the main axis — vertically in a row.
- justify-items — Aligns grid items horizontally inside their cells.
- align-content — Distributes the lines of a multi-line flex container, or the rows of a grid, along the cross axis.
Related recipes
In the tutorial
- Grid — CSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.