Place Content Shorthand Property
Last updated: 2026-09-13
place-content Place Content Shorthand Property
place-content is a shorthand for align-content and justify-content. On a grid container it controls how the entire grid content area aligns relative to the container. When the total size of the grid tracks is smaller than the container, this property decides how the leftover space is distributed. It is key for centering and distributing the whole grid.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
place-content: <align-content> <justify-content>?;⚙️ Values
| Value | Type | Description |
|---|---|---|
<align-content> / <justify-content> | Value | Content alignment shorthand |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| place-content | ✓ v57 | ✓ v16 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： place-content: center centers the whole grid both horizontally and vertically in the container.
Tip： Values such as space-between, space-around and space-evenly control how the space is distributed between the grid tracks.
❓ FAQ
QWhen does place-content actually take effect?
AOnly when the total size of the grid tracks (including gap) is smaller than the container. The browser then aligns and distributes the leftover space according to the place-content value. If the tracks fill the container by adapting with fr units, or if the container is sized by its content with no spare room, the property shows no visible effect. To make it work, size the tracks with fixed or minmax values and give the container a definite width and height.
QShould I use place-content or place-items?
AThey act at different levels and are often used together. place-content positions the whole grid content area inside the container, answering “the grid is smaller than the container, how do I lay it out”. place-items aligns each grid item inside its own cell, answering “how do I arrange the items within each cell”. Center the group with place-content; center the items with place-items.
QWhy does place-content: center sometimes do nothing in a grid?
AThe most common reason is that the grid fills the container: tracks sized with fr absorb all the remaining space automatically, so there is no spare area for place-content to act on. Another reason is that the container height comes from its content, leaving no leftover space. To center the whole grid with place-content: center, size the tracks with fixed or minmax values and give the container explicit dimensions.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
Place Items
Controls how each grid item aligns in its cell
Place Self
Controls the alignment of a single grid item
