place-content | CSS-Tricks

CSS Almanac → Properties → P → place-content

Marcel Rojas on May 13, 2021 (Updated on May 17, 2021)

The place-content property in CSS is shorthand for the align-content and justify-content properties, combining them into a single declaration in CSS Grid and Flexbox layouts, where align-content and justify-content are values that align an individual item in the block and inline directions.

.element {
  display: flex;
  place-content: start space-evenly;
}

So, instead of writing out align-content and justify-content like this:

.item {
  display: grid;
  align-content: self-start;
  justify-content: center;
}

…we can declare place-content which takes both of those values:

.item {
  display: grid;
  place-content: self-start center;
}

If only one value is provided, then it sets both properties. For example, this:

.item {
  display: grid;
  place-content: self-start;
}

…is the same as writing this:

.item {
  display: grid;
  align-content: self-start;
  justify-content: self-start;
}

Syntax

This is just a fancy way of saying that place-content takes two values, the first for the align-content property value, and the second for the justify-content property value:

place-content: <'align-content'> <'justify-content'>?

Initial value: normal
Applies to: block containers, flex containers, and grid containers
Inherited: no
Computed value: as specified
Animation type: discrete

Values

Some great examples of values and value pairs pulled straight from MDN:

/* Positional alignment */
/* align-content does not take left and right values */
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/* Baseline alignment */
/* justify-content does not take baseline values */
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/* Distributed alignment */
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

/* Global values */
place-content: inherit;
place-content: initial;
place-content: unset;

Sometimes it helps to have a visual:

`align-content`

`justify-content`

Positional alignment values

When we talk about “positional” alignment, we’re referring to named values that indicate which edge of the container items aligned to. All of these values apply to align-content and justify-content, except for left and right, which are not supported by justify-content.

self-start: This aligns the elements with the starting edge of the container.
self-end: This aligns the elements with the ending edge of the container.
flex-start: This is used in a flex layout, where the elements is flushed to the container’s starting edge.
flex-end: This is used in a flex layout, where the elements is flushed to the container’s ending edge.
center: This centers the elements within its container.
left: This flushes the elements to the container’s left edge.
right: This flushes the elements to the container’s right edge.

Baseline alignment values

A baseline aligns all elements within a group (i.e. cells within a row) by matching up their baselines in way where their top or bottom edge are lined up.

baseline: This aligns the elements within a group by matching up their alignment baselines with the baselines of the group. Defaults to first if baseline is used on its own.
first baseline: This aligns the alignment baseline of the box’s first baseline set with the corresponding baseline in the shared first baseline set of all the boxes in its baseline-sharing group. Fallback alignment is start.
last baseline: This aligns the alignment baseline of the box’s last baseline set with the corresponding baseline in the shared last baseline set of all the boxes in its baseline-sharing group. Fallback alignment is end.

Distributed alignment values

How should the elements be distributed in the container? Should they spread apart? Should they stretch to fill the available space? That’s the sort of stuff the following values define.

space-between: The elements are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same.
space-around: The elements are evenly distributed within the alignment container. The spacing between each pair of adjacent items is the same.
space-evenly: The element are evenly distributed within the alignment container. The spacing between each pair of elements are all exactly the same.
stretch: Used to stretch an item on both axes, while still respecting the constraints imposed by the max-height and max-width properties (or equivalent functionality).

Examples

`place-content: space-around start;`

There is breathing room around the elements (space-around) and they are flushed to the starting edge (start ) of the container.

`place-content: end center;`

The elements are flushed to the ending edge (end) of the container in the block direction, then centered in the inline direction.

`place-content: space-between center;`

Here we’re pushing the elements at opposite edges of the container (space-between) in the block direction and then centering (center) them in the inline direction.