place-items

Definition

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

Examples

Center the items both horizontally and vertically:

.container {
  display: grid;
  place-items: center;
}

Align the items to the top left corner:

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

Align the items to the bottom right corner:

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

Values

Best Practices

• Use this property on grid container elements to align and justify the items inside them.
• Use meaningful values for the place-items property to ensure that the items are aligned and justified correctly and look good across a variety of devices and screen sizes.
• Consider using the align-items and justify-items properties separately if you need more fine-grained control over the vertical and horizontal alignment of the items, 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