CSS place-content

The place-content property in CSS is used to align and place grid items along both the block and inline directions at the same time, similar to the align-items and justify-content properties combined. This property is only applicable to grid containers.

The syntax for the place-content property is as follows:


.container {
  place-content:  ;
}

The values for the place-content property can be any valid values for the align-items and justify-content properties such as start, center, end, stretch, flex-start, space-between, space-around, etc.

Result:
1
2
3

In the example above, the grid container has the following styles:


.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 10px;
  place-content: center space-around;
}

.item {
  background-color: lightblue;
  padding: 10px;
}

The place-content property aligns the grid items both vertically and horizontally within the grid container. In this case, the items are centered vertically and spaced around horizontally.