1. css
  2. /properties
  3. /place-items



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.


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;


startAligns the items to the start of the container.
endAligns the items to the end of the container.
centerCenters the items in the container.
stretchStretches the items to fill the container.
baselineAligns the items such that their baselines align.

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

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera