CSS place-content Property

Definition and Usage

The place-content property is a shorthand for align-content and justify-content. It packs or distributes content along the block and inline axes in a flex or grid container.

One value sets both axes (when valid for both). Two values set block first, then inline. It is not place-items, which aligns each item inside its cell.

CSS Syntax

First value → align-content. Optional second value → justify-content. If the second is omitted, the first is used for both when it is valid for both.

Property Values

How to Use place-content

Make a flex or grid container larger than its content, then pick how the content sits in the leftover space.

1. Set display: grid or display: flex on the container.
2. Give the box a size larger than its tracks or flex lines (width and/or height).
3. On flex, set flex-wrap: wrap when you need more than one line for the block axis.
4. Set place-content on the container. It is not inherited.

Live Preview

A 2×2 grid of fixed tracks inside a larger box. Change only place-content.

CSS Examples

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

<style>
  section {
    display: grid;
    grid-template-columns: 60px 60px;
    width: 220px;
    height: 160px;
    place-content: center;
    border: 1px solid #ccc;
  }
</style>

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

<style>
  section {
    display: grid;
    grid-template-columns: 60px 60px;
    width: 220px;
    height: 160px;
    place-content: start end;
    border: 1px solid #ccc;
  }
</style>

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

<style>
  section {
    display: grid;
    grid-template-columns: 60px 60px;
    width: 220px;
    height: 160px;
    place-content: space-between;
    border: 1px solid #ccc;
  }
</style>

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

Key Takeaways