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 both vertical and horizontal 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 content along the block axis (e.g., top, center, stretch).
• justify‑content aligns content along the inline axis (e.g., left, center, right).

If only one value is provided, it is applied to both axes.

An Example: Aligning Grid Content

If you imagine a one‑by‑two grid layout, where the content doesn't completely fill the container, and we want it centred, the code might look like this:

.container {  display: grid;  grid-template-columns: repeat(2, 1fr);  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

Much like with place‑items, place‑content is most effective when used with grid layouts because of the way that flexbox differs when determining alignment. Nevertheless, it can also be applied to flexbox containers too, although its use is limited to aligning multi‑line flex items (i.e., when flex‑wrap is enabled).

For example, this will evenly distribute wrapped flex items across the container.

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

place‑content vs. place‑items

The distinction you need to understand between the two properties is that whilst place‑content aligns a container's overall content, place‑items aligns individual items within their cells.

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 and maintain.

Key Takeaways

• The place‑content property is shorthand for aligning the overall content of a grid or flex container.
• It combines align‑content (block axis) and justify‑content (inline axis) into a single property.
• If you only specify one value, then that alignment is applied on both axes.
• 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.