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.