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:
Align the items to the top left corner:
place-items: start start;
Align the items to the bottom right corner:
place-items: end end;
|Aligns the items to the start of the container.
|Aligns the items to the end of the container.
|Centers the items in the container.
|Stretches the items to fill the container.
|Aligns the items such that their baselines align.
- 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.