Control CSS Container Layouts with place-content

In CSS, the place-content property (not to be confused with the place-items property) provides a shorthand way to align the entire content of a grid or flexbox container along its two layout axes. It combines the use of align-content and justify-content into a single shorthand property, which can help you simplify your layout alignment code.

I mentioned at the start: this is different (but very similar) to the CSS place-items property, which aligns items within a container, and which you can read more about here.

What is place-content?

The place-content property is used to align the entire content (e.g., grid tracks or flexbox lines) within a container, rather than individual items. It's particularly useful in grid layouts where the content may not occupy the full height or width of the container.

Syntax

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

• align-content aligns grid tracks along the block axis, or flex lines along the cross axis (for example, start, center, or stretch).
• justify-content aligns grid tracks along the inline axis, or flex items along the main axis (for example, start, center, or end).

For a value shared by both longhands, such as center, one value sets both properties. Baseline alignment is the exception: a single baseline value sets justify-content to start. Use two values when the two properties need different alignment.

An Example: Aligning Grid Content

Imagine a two‑by‑two grid with four .item children. Its two 100px columns and two 100px rows leave spare space inside a 400px by 300px container, so we can see the tracks being centred:

.container {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2, 100px);
  height: 300px;
  width: 400px;
  place-content: center;
  border: 1px solid #ccc;
}

.item {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

Here, it's the entire grid tracks (and not just the items) that are centred within the container, both vertically and horizontally.

Flexbox and place-content

In a flex container, justify-content distributes items along the main axis, including when there is only one line. align-content distributes the lines along the cross axis, but only in a wrapping container: use flex-wrap: wrap or wrap-reverse. With nowrap, that part of the shorthand has no effect.

This example uses space-around to distribute spare space around items along each line and around the flex lines. Give the container enough room on the relevant axis to see that spacing:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  place-content: space-around;
}

place-content vs. place-items

In Grid, place-content aligns the tracks as a group, whilst place-items aligns individual items within their grid areas. Flexbox differs: the justify-items part of place-items does not apply to flex items.

Comparison:

You can ‑ and perhaps should, of course, use both properties together in order to fully control layout alignment at both the content and item levels.

Wrapping Up

The place-content property is a powerful tool for aligning container content within grid and flexbox layouts. It allows us to simplify the CSS we write by combining align-content and justify-content rules into a single property, making our code easier to read, and perhaps even maintain.

Key Takeaways

• The place-content property is shorthand for aligning the overall content of a grid or flex container.
• It combines align-content and justify-content: block and inline axes in Grid, cross and main axes in Flexbox.
• A shared value such as center sets both longhands; a single baseline value uses start for justify-content.
• It is best used for layouts where the container's content does not fully occupy the available space.
• For item‑level alignment, consider using place-items instead.

By using place-content, we gain precise control over container alignment without the need for multiple rules.