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 one‑by‑three grid with .container and filling it with three items. place-items: center centres each item within its own grid area. In the usual horizontal writing mode, that means centring horizontally and vertically; it doesn't group all three items in the middle of 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 container uses align-items on the cross axis and justify-content on the main axis instead.

In flexbox, the main axis follows flex-direction and the cross axis is perpendicular to it. Grid uses the logical block and inline axes. In a horizontal writing mode, block is vertical and inline is horizontal; in a vertical writing mode, that mapping changes. The axis names follow the writing mode, not a fixed screen direction.

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

• In Grid, place-items aligns items along the logical block and inline axes. Their physical directions depend on the writing mode.
• 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.