Simplify Your Layout CSS with place‑items

The CSS place-items property combines align-items and justify-items. It can align items on both axes in a grid. On a flexbox container, only align-items affects flex items because justify-items does not apply to flex layout. Centring on both flex axes instead requires align-items and justify-content declarations. Think of it as being a little like using margin with two or four values instead of margin-left, margin-right, margin-top, margin-bottom.

If you're looking to align not just individual items but the overall content of a container, there's also a related CSS shorthand property called place-content, which replaces align-content and justify-content. I talk about that in more detail in my companion article here.

What is place-items?

The place-items property combines the two item‑alignment properties. It is primarily used in grid. Although it can be declared on flex containers, its justify-items component does not align flex items.

Syntax

place-items: <align-items-value> <justify-items-value>;

• align-items controls alignment along the block axis (typically vertical);
• justify-items controls alignment along the inline axis (generally horizontal).

If you only specify one value, then it is applied to both align-items and justify-items.

A Basic Example

If you already know how to use align-items and justify-items then this should come very easily to you. Here's an example:

.container {  display: grid;  place-items: center;  grid-template-columns: repeat(3, 1fr);  height: 200px;  border: 1px solid #ccc;}.item {  background-color: #f4f4f4;  padding: 10px;  border: 1px solid #ddd;}

Here, we're creating a simple one‑by‑three grid with .container, and filing it with three items. Because we've included place-items: center, the grid items will be centred both horizontally and vertically within the container.

Customising place-items

As you might expect, you can use any of the values that align-items and justify-items accept, even if they are different, just by specifying both explicitly:

.container {  display: grid;  place-items: start center;}

Here, the items within the grid will be positioned at the start of the block axis and centred along the inline axis.

Flexbox and place-items

The two‑axis behaviour above belongs to place-items in CSS Grid. A flex containers uses align-items on the cross axis and justify-content on the main axis instead.

However, flexbox behaves a little differently to grid when it comes to item alignment. In flexbox, alignment depends on the main axis (defined by flex-direction) and the cross axis (which is perpendicular to the main axis). Whereas in grid, alignment is always determined by the block (vertical) and inline (horizontal) axes, regardless of the content's orientation.

In flexbox, align-items controls cross‑axis alignment, while justify-items is ignored. Therefore place-items cannot centre flex children on both axes.

Use align-items and justify-content to centre flex children on the cross and main axes respectively:

.flex-container {  display: flex;  align-items: center;  justify-content: center;}

This works for either flex-direction because justify-content follows the main axis and align-items follows the cross axis.

Wrapping Up

The place-items property allows us to simplify the CSS code we write for layouts by combining align-items and justify-items into a single shorthand for grid item alignment. For a flex layout, use align-items with justify-content when both axes need to be controlled.

Key Takeaways

• place-items is a shorthand property in CSS for aligning items along both block (vertical) and inline (horizontal) axes.
• It simplifies layouts by combining align-items and justify-items into a single declaration.
• When only one value is specified, that alignment is applied to both axes.
• It is best used in grid layouts. On flex containers, use align-items and justify-content for two‑axis centring.
• For content‑level alignment, consider using place-content instead.

By using place-items, we gain a straightforward way to manage grid item alignment, making our code just that little bit cleaner and easier to maintain.