CSS propertyGrid
place-items
A shorthand that sets align-items and justify-items at the same time.
- Initial value
normal legacy- Inherited
- No
- Animatable
- no
- Applies to
- all elements, the effect shows up in grid containers
- JavaScript
element.style.placeItems = "center"
Example
#CSS
.hero {
display: grid;
place-items: center;
min-height: 140px;
}Example HTML
<section class="hero stage">
<strong>Perfectly centered</strong>
</section>Preview
Definition and usage
#The place-items property combines vertical alignment (align-items) and horizontal alignment (justify-items). One value sets both axes, two values set vertical and horizontal in that order.
Its most famous use is centering content: display: grid; place-items: center; puts an item exactly in the center of the container on both axes. Two lines of code instead of the old tricks.
In Flexbox only the align-items part works, because justify-items is ignored there.
Syntax
#Syntax
place-items: <align-items> <justify-items>?;Values
#- Items fill their whole cells.
- Items sit in the center of their cells on both axes.
- At the top vertically and at the right edge horizontally.
- At the bottom and centered horizontally.
Values in practice
#stretch
Items fill their whole cells.
.demo { place-items: stretch; }center
Items sit in the center of their cells on both axes.
.demo { place-items: center; }start end
At the top vertically and at the right edge horizontally.
.demo { place-items: start end; }end center
At the bottom and centered horizontally.
.demo { place-items: end center; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#display: grid; place-items: center;is the shortest way to center anything on both axes.- The order of the two values is vertical first (align), then horizontal (justify).
Related entries
#- align-itemsAligns items along the cross axis of a flex or grid container.
- justify-itemsAligns all items within their cells along the horizontal axis.
- place-contentA shorthand that sets align-content and justify-content at the same time.
- place-selfA shorthand that sets align-self and justify-self for a single item.
Spotted a mistake or missing an example? Write to us.