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#
1/* Single value - applies to both axes */
2.container {
3 place-items: center;
4}
5
6/* Two values - align-items / justify-items */
7.container {
8 place-items: start end;
9}
10
11/* Equivalent longhand */
12.container {
13 align-items: center;
14 justify-items: center;
15}Perfect Centering#
1/* Center everything in grid */
2.grid-center {
3 display: grid;
4 place-items: center;
5 height: 100vh;
6}
7
8/* Center in flexbox */
9.flex-center {
10 display: flex;
11 place-items: center; /* Note: justify-items doesn't apply in flexbox */
12 /* Use place-content: center for flex */
13}
14
15/* Grid is better for centering */
16.perfect-center {
17 display: grid;
18 place-items: center;
19 min-height: 100vh;
20}All Values#
1/* Start alignment */
2.start {
3 place-items: start;
4}
5
6/* End alignment */
7.end {
8 place-items: end;
9}
10
11/* Center alignment */
12.center {
13 place-items: center;
14}
15
16/* Stretch (default) */
17.stretch {
18 place-items: stretch;
19}
20
21/* Baseline alignment */
22.baseline {
23 place-items: baseline;
24}
25
26/* Mixed values */
27.mixed {
28 place-items: center start; /* vertically center, horizontally start */
29 place-items: end center; /* vertically end, horizontally center */
30 place-items: start stretch; /* vertically start, horizontally stretch */
31}Grid Layouts#
1/* Centered grid items */
2.grid {
3 display: grid;
4 grid-template-columns: repeat(3, 200px);
5 grid-template-rows: repeat(3, 200px);
6 gap: 1rem;
7 place-items: center;
8}
9
10/* Items don't stretch to fill cells */
11.grid-item {
12 /* Natural size, centered in cell */
13}
14
15/* Different alignments per axis */
16.grid-mixed {
17 display: grid;
18 grid-template-columns: repeat(3, 1fr);
19 place-items: end center;
20 /* Items at bottom, horizontally centered */
21}Card Layouts#
1/* Card with centered content */
2.card {
3 display: grid;
4 place-items: center;
5 aspect-ratio: 1;
6 padding: 2rem;
7 background: white;
8 border-radius: 12px;
9}
10
11/* Card grid */
12.card-grid {
13 display: grid;
14 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
15 gap: 1.5rem;
16}
17
18.card-grid .card {
19 display: grid;
20 place-items: center;
21 min-height: 200px;
22}Icon Containers#
1/* Centered icon in container */
2.icon-box {
3 display: grid;
4 place-items: center;
5 width: 48px;
6 height: 48px;
7 background: #f3f4f6;
8 border-radius: 12px;
9}
10
11/* Icon button */
12.icon-button {
13 display: grid;
14 place-items: center;
15 width: 40px;
16 height: 40px;
17 border: none;
18 background: transparent;
19 cursor: pointer;
20 border-radius: 8px;
21}
22
23.icon-button:hover {
24 background: #e5e7eb;
25}Hero Sections#
1/* Full-screen hero */
2.hero {
3 display: grid;
4 place-items: center;
5 min-height: 100vh;
6 padding: 2rem;
7 text-align: center;
8}
9
10/* Hero with background */
11.hero-bg {
12 display: grid;
13 place-items: center;
14 min-height: 80vh;
15 background: url('/hero.jpg') center / cover;
16}
17
18.hero-content {
19 max-width: 600px;
20 padding: 2rem;
21 background: rgba(255, 255, 255, 0.9);
22 border-radius: 16px;
23}Loading States#
1/* Centered spinner */
2.loading-container {
3 display: grid;
4 place-items: center;
5 min-height: 200px;
6}
7
8/* Full-page loader */
9.page-loader {
10 position: fixed;
11 inset: 0;
12 display: grid;
13 place-items: center;
14 background: white;
15 z-index: 1000;
16}
17
18/* Overlay loader */
19.overlay-loader {
20 position: absolute;
21 inset: 0;
22 display: grid;
23 place-items: center;
24 background: rgba(255, 255, 255, 0.8);
25}Empty States#
1/* Empty state container */
2.empty-state {
3 display: grid;
4 place-items: center;
5 padding: 4rem 2rem;
6 text-align: center;
7 color: #6b7280;
8}
9
10.empty-state-icon {
11 font-size: 4rem;
12 margin-bottom: 1rem;
13}
14
15/* Table empty state */
16.table-empty {
17 display: grid;
18 place-items: center;
19 padding: 3rem;
20 border: 2px dashed #e5e7eb;
21 border-radius: 8px;
22}Modal Content#
1/* Modal overlay */
2.modal-overlay {
3 position: fixed;
4 inset: 0;
5 display: grid;
6 place-items: center;
7 background: rgba(0, 0, 0, 0.5);
8 padding: 1rem;
9}
10
11/* Modal box */
12.modal {
13 background: white;
14 border-radius: 16px;
15 max-width: 500px;
16 width: 100%;
17 max-height: 90vh;
18 overflow: auto;
19}Avatar Groups#
1/* Single avatar */
2.avatar {
3 display: grid;
4 place-items: center;
5 width: 40px;
6 height: 40px;
7 border-radius: 50%;
8 background: #3b82f6;
9 color: white;
10 font-weight: 600;
11}
12
13/* Avatar with image */
14.avatar img {
15 width: 100%;
16 height: 100%;
17 object-fit: cover;
18 border-radius: 50%;
19}
20
21/* Avatar placeholder */
22.avatar-placeholder {
23 display: grid;
24 place-items: center;
25 width: 40px;
26 height: 40px;
27 background: #e5e7eb;
28 border-radius: 50%;
29}Responsive Alignment#
1/* Change alignment at breakpoints */
2.responsive-grid {
3 display: grid;
4 place-items: start;
5 gap: 1rem;
6}
7
8@media (min-width: 768px) {
9 .responsive-grid {
10 place-items: center;
11 }
12}
13
14@media (min-width: 1024px) {
15 .responsive-grid {
16 place-items: start center;
17 }
18}vs place-content#
1/* place-items - aligns items within their grid areas */
2.place-items-example {
3 display: grid;
4 grid-template-columns: repeat(3, 1fr);
5 place-items: center;
6 /* Each item centered in its cell */
7}
8
9/* place-content - aligns the grid tracks within container */
10.place-content-example {
11 display: grid;
12 grid-template-columns: repeat(3, 100px);
13 place-content: center;
14 height: 400px;
15 /* Grid tracks centered in container */
16}
17
18/* Both together */
19.both {
20 display: grid;
21 grid-template-columns: repeat(3, 100px);
22 place-content: center; /* Center the grid */
23 place-items: center; /* Center items in cells */
24 height: 400px;
25}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.