Simplify Your Layout CSS with place‑items

The CSS place‑items property is a shorthand property that we can use to align items within a grid or flexbox container on the horizontal and vertical axes . It simplifies our CSS code just a little by removing the need for separate align‑items and justify‑items 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 allows us to control the alignment of items along both the inline (horizontal) and block (vertical) axes simultaneously. It's primarily used in grid containers but can also be applied to flex containers.

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.

Customizing 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

Although I would argue that place‑items is most commonly used in CSS Grid, it is just as applicable for flex containers.

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.

What this means is that flexbox alignment doesn't always map directly to align‑items and justify‑items, which may well be why it is used less frequently with Flexbox.

Nevertheless, it can be especially handy when centring flex children both horizontally and vertically (regardless of the main axis):

.flex-container {  display: flex;  place-items: center;}

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, intuitive shorthand. Whilst it is most effective for grid layouts, it can also be used with flex too.

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 for concise and flexible alignment but can also be applied to flex containers.
• For content‑level alignment, consider using place‑content instead.

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