Place Items Shorthand Property
Last updated: 2026-09-13
place-items Place Items Shorthand Property
place-items is a shorthand for align-items and justify-items. On a grid container it sets how every grid item aligns inside its own cell, in one declaration. It controls both the vertical (align) and horizontal (justify) alignment at the same time, which makes it a convenient tool for centering or aligning grid content.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
place-items: <align-items> <justify-items>?;⚙️ Values
| Value | Type | Description |
|---|---|---|
<align-items> / <justify-items> | Value | Alignment shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| place-items | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： With a single value, both align-items and justify-items use it: place-items: center centers in both directions.
Tip： place-items is set on the container and affects all grid items; to control a single item, use place-self.
❓ FAQ
QWhat is the difference between place-items and place-content?
Aplace-items controls how each grid item aligns inside its own cell. place-content controls how the whole grid content area aligns inside the container, which matters when the total track size is smaller than the container. The former acts on the items, the latter on the group, and both can be set at the same time without conflicting. If the tracks already fill the container, place-content has nothing to distribute and only place-items still shows a visible effect, since the cells remain larger than their content.
QDoes place-items work in flexbox too?
AYes. place-items is valid in both grid and flexbox. In flex it is equivalent to setting align-items and justify-items at the same time, but justify-items has no effect in flex because flex items are laid out along the main axis without cells, so that part is ignored. For centering in both directions it is therefore better to write align-items: center and justify-content: center explicitly, which is the conventional flexbox recipe and works in every browser that supports flex.
QWhich direction do the two values in place-items: start end control?
AThe first value maps to align-items (vertical) and the second to justify-items (horizontal). place-items: start end aligns the items to the top vertically and to the right horizontally. This order matches the align-then-justify convention used across the whole place-* family, and a single value always applies to both axes, so place-items: center centers both horizontally and vertically - the most common way to center grid content.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Place Content
Controls how the whole grid aligns inside the container
Place Self
Controls the alignment of a single grid item
