The place-items property is a shorthand for align-items and justify-items, making it easy to center content and control alignment. Here's how to use it.
Basic Syntax
Loading code block...
Perfect Centering
Loading code block...
All Values
Loading code block...
Grid Layouts
Loading code block...
Card Layouts
Loading code block...
Icon Containers
Loading code block...
Hero Sections
Loading code block...
Loading States
Loading code block...
Empty States
Loading code block...
Modal Content
Loading code block...
Avatar Groups
Loading code block...
Responsive Alignment
Loading code block...
vs place-content
Loading code block...
Best Practices
Usage:
✓ Grid for centering content
✓ Single value for uniform alignment
✓ Two values for different axes
✓ Combine with place-content
Common Patterns:
✓ Centered hero sections
✓ Icon containers
✓ Loading states
✓ Modal overlays
Grid vs Flexbox:
✓ Grid: place-items works fully
✓ Flex: justify-items has no effect
✓ Flex: use place-content instead
✓ Grid preferred for centering
Avoid:
✗ Using on non-grid/flex containers
✗ Confusing with place-content
✗ Forgetting min-height
✗ Over-complicating simple layouts
Conclusion
The place-items property simplifies alignment in grid layouts by combining align-items and justify-items into one declaration. Use place-items: center for perfect centering, two values for different axes, and combine with grid for predictable results. For flexbox, remember that justify-items doesn't apply - use place-content instead. This property is ideal for centered containers, icon boxes, loading states, and modal overlays.