CSS place-items Property

Definition and Usage

The place-items property is a shorthand for align-items and justify-items. It aligns each item inside its grid cell (or along the flex axes) in one declaration.

One value sets both axes. Two values set block first, then inline. It is not place-content, which moves the whole track group. Override one item with place-self.

CSS Syntax

First value → align-items. Optional second value → justify-items. If the second is omitted, the first is used for both.

Property Values

How to Use place-items

Make cells larger than the items, then choose how each item sits in its cell.

1. Set display: grid (or flex) on the container.
2. Give tracks or the container enough size that cells have spare room.
3. Set place-items on the container. It is not inherited.
4. Override one item with place-self when needed.

Live Preview

Four fixed-size items in larger grid cells. Change only place-items.

CSS Examples

Each snippet focuses on place-items. Use Try It Yourself for a live editor.

<style>
  section {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 80px 80px;
    place-items: center;
    border: 1px solid #ccc;
  }

  div {
    width: 48px;
    height: 36px;
  }
</style>

<section>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 80px 80px;
    place-items: start end;
    border: 1px solid #ccc;
  }

  div {
    width: 48px;
    height: 36px;
  }
</style>

<section>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>

<style>
  section {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 80px 80px;
    place-items: stretch;
    border: 1px solid #ccc;
  }
</style>

<section>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>

Key Takeaways