Place-Items and CSS Grid – centering content in cells

DanielMay 14, 2023

New day, new CSS property discovered 🎉.

This time was place-items a shorthand for the align-items and justify-items properties.

We can very easily center the contents in CSS grid cells by saying:

.my-grid-element {
    display: grid;
    place-items: center;
    /* place-items replaces the following:
    align-items: center;
    justify-items: center; */
}

Place-items and place-content

There is a very similar property to place-items named place-content.

Keep in mind that place-items and place-content differ in their function:

• place-items sets the position of each item relative to the container
• while place-content sets the position of the content inside each item relative to its container.

The place-items prop is typically used for grid layouts, whereas place-content is more commonly used for positioning blocks of text or images.

You can checkout the below video of Kevin Powell for a more in-depth comparison: