place-content

Definition

The place-content property is a shorthand property in CSS that sets both the align-content and justify-content properties in a single declaration. It is used to align and justify the content inside a flexbox or a grid container. The align-content property aligns the content vertically, while the justify-content property aligns the content horizontally.

Examples

Center the content both horizontally and vertically:

.container {
  display: flex;
  place-content: center;
}

Align the content to the top left corner:

.container {
  display: grid;
  place-content: start start;
}

Align the content to the bottom right corner:

.container {
  display: grid;
  place-content: end end;
}

Values

Best Practices

• Use this property on container elements that use flexbox or grid layouts to align and justify the content inside them.
• Use meaningful values for the place-content property to ensure that the content is aligned and justified correctly and looks good across a variety of devices and screen sizes.
• Consider using the align-content and justify-content properties separately if you need more fine-grained control over the vertical and horizontal alignment of the content, respectively.
• Test your content on different devices and in different browsers to ensure that it renders correctly and looks good across a variety of contexts.
• Avoid using this property excessively on a single page or website, as it can become difficult to maintain and may negatively impact performance.

Browser Compatibility