CSS place-content Property

❮ Previous Reference Next ❯


#demo {
  width: 500px;
  height: 500px;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
  place-content: center space-around;


The place-content CSS property align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox.

The place-content property is a shorthand for the following CSS properties:

The first value is the align-content property value, the second the justify-content one.

Default value:normal normal
JavaScript syntax:

Standard Syntax

place-content: stretch|center|flex-end|flex-start|space-around|space-between|start|end|normal|baseline|space-evenly|safe|unsafe|initial|inherit|revert|revert-layer|unset;

Browser Support


Property Values

The following table describes the values of this property:

Value Description
stretch This is default value. Items are stretched to fit the flex container. The free-space is divided equally between all the items.
center Items are positioned at the center of the flex container.
flex-end Items are positioned at the end of the flex container.
flex-start Items are positioned at the beginning of the flex container.
space-around Items are evenly distributed in the flex container so that the spaces around every item are same.
space-between Items are evenly distributed in the flex container in such a way that the space between two adjacent items is same.
start The items are packed flush to each other against the start edge of the alignment container in the cross axis.
end The items are packed flush to each other against the end edge of the alignment container in the cross axis.
normal The items are packed in their default position as if no align-content value was set.
baseline Set with the corresponding baseline.
  • baseline
  • first baseline
  • last baseline
space-evenly The items are evenly distributed within the alignment container along the cross axis. The spacing between each pair of adjacent items, the start edge and the first item, and the end edge and the last item, are all exactly the same.
safe Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.
unsafe Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.

Default CSS Property Values

selectors {
  place-content: normal normal;
❮ Previous Reference Next ❯