CSS propertyGrid

place-content

A shorthand that sets align-content and justify-content at the same time.

Initial value: normal
Inherited: No
Animatable: no
Applies to: grid containers, flex containers with multiple lines, and multi-column containers
JavaScript: element.style.placeContent = "center"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.board {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  place-content: center;
  gap: 6px;
  height: 180px;
}

Preview

Definition and usage

The place-content property combines align-content (vertical) and justify-content (horizontal). It positions the container’s entire content, meaning whole grid rows and columns, or flex item lines, whenever free space remains.

The difference from place-items is subtle but important: place-items aligns items within their cells, while place-content shifts the entire grid inside the container.

One value sets both axes. The exception is baseline-based values, which only apply to the vertical axis.

Syntax

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

Values

normal
The grid sits in the top-left corner.
center
The whole grid is centered in the container.
end start
The grid at the bottom, against the left edge.
space-between
The rows and columns spread out to the edges.

Value	Description
normal	The grid sits in the top-left corner.
center	The whole grid is centered in the container.
end start	The grid at the bottom, against the left edge.
space-between	The rows and columns spread out to the edges.

Values in practice

normal

The grid sits in the top-left corner.

.demo { place-content: normal; }

center

The whole grid is centered in the container.

.demo { place-content: center; }

end start

The grid at the bottom, against the left edge.

.demo { place-content: end start; }

space-between

The rows and columns spread out to the edges.

.demo { place-content: space-between; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

When the grid has fixed dimensions smaller than the container, place-content: center centers it as a whole.
If you want to align items within their cells rather than the whole grid, reach for place-items.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course