CSS place-items Property

What You’ll Learn

The place-items property is a shorthand for align-items and justify-items. It aligns each item inside its own grid cell or flex area.

Introduction

The place-items property in CSS is a shorthand for setting both the align-items and justify-items properties in a grid or flex container.

This property simplifies the alignment of grid items or flex items within their container, allowing for cleaner and more concise code. It helps control the positioning of items both horizontally and vertically inside their areas.

Definition and Usage

Use place-items when every child should follow the same alignment rule inside its cell. This is different from place-content, which moves the entire track group inside the container.

A single value such as center is one of the most common patterns for icon buttons, cards, and centered content blocks in grid layouts.

📝 Syntax

The syntax for the place-items property is as follows:

element {
  place-items: align-items justify-items;
}

Here, align-items and justify-items control alignment along the block and inline axes. You can set both values at once with this shorthand.

Basic Example

.container {
  display: grid;
  place-items: center;
}

Syntax Rules

• One value sets both align-items and justify-items.
• Two values set block axis first, then inline axis.
• Works on grid containers and flex containers.
• Best for aligning items inside cells, not moving whole track groups.
• Common values include start, center, end, and stretch.
• Use place-self when only one child needs a different alignment.

🎯 Default Value

The initial value of place-items follows align-items and justify-items. In grid layouts, this typically behaves like stretch on both axes, so items expand to fill their cells unless you set another value.

💎 Property Values

place-items accepts the same values as align-items and justify-items.

align-items values (block axis)

• start — Align items to the start of the block axis.
• center — Align items to the center of the block axis.
• end — Align items to the end of the block axis.
• stretch — Stretch items to fill the container along the block axis.

justify-items values (inline axis)

• start — Align items to the start of the inline axis.
• center — Align items to the center of the inline axis.
• end — Align items to the end of the inline axis.
• stretch — Stretch items to fill the container along the inline axis.

When Does place-items Matter?

place-items is ideal when each child should align consistently inside its own area:

• Centered icons — Put icons or avatars in the middle of square grid cells.
• Dashboard tiles — Align card content uniformly across a grid.
• Form controls — Center labels or buttons inside fixed-size cells.
• Less CSS noise — Replace two longhand properties with one declaration.

If the whole grid should move inside a larger container, use place-content instead.

Examples Gallery

Start with a centered grid item, align multiple cells, try two-value syntax, and use flexbox.

<style>
  .container {
    display: grid;
    height: 200px;
    width: 200px;
    place-items: center;
    border: 1px solid #000;
  }

  .item {
    width: 50px;
    height: 50px;
    background-color: lightblue;
  }
</style>

<div class="container">
  <div class="item"></div>
</div>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 6rem);
    place-items: center;
  }
</style>

<style>
  .container {
    display: grid;
    place-items: start end;
  }
</style>

<style>
  .container {
    display: flex;
    place-items: center;
    height: 8rem;
  }
</style>

place-items vs align-items and justify-items

place-items is shorthand for align-items (block axis) and justify-items (inline axis).

It is different from place-content, which aligns the entire content group rather than each item inside its cell.

/* Shorthand */
.container {
  place-items: center;
}

/* Longhand equivalent */
.container {
  align-items: center;
  justify-items: center;
}

💡 Best Practices