CSS place-items Property

The place-items property in CSS is a shorthand that allows you to control the alignment of items within a grid or flex container. It simplifies the process of aligning items both horizontally and vertically.

Key Concepts

• Grid and Flex Containers:
  The place-items property works specifically with CSS Grid and Flexbox layouts.
• Shorthand for Alignment Properties:
  It combines two properties:
  • align-items: Controls vertical alignment of items.
  • justify-items: Controls horizontal alignment of items.
• Value Options:
  You can set one or two values for place-items:

Two Values: The first value is for vertical alignment and the second for horizontal alignment.

place-items: start end; /* Vertically aligns items to the start and horizontally to the end */

Single Value: Applies the same alignment for both axes.

place-items: center; /* Aligns items both vertically and horizontally to the center */

Examples

Example 1: Centering Items

.container {
  display: grid;
  place-items: center; /* Centers items both vertically and horizontally */
}

Example 2: Different Alignments

.container {
  display: grid;
  place-items: start stretch; /* Vertically aligns to the start and stretches horizontally */
}

Conclusion

The place-items property is a useful and efficient way to align items in your CSS layout. By combining align-items and justify-items, it simplifies your code and enhances readability. Understanding this property is essential for effective grid and flexbox design.