CSS place-content Property

What You’ll Learn

The place-content property is a shorthand for align-content and justify-content. It aligns and distributes content inside grid and flex containers.

Introduction

The place-content property in CSS is a shorthand property used to align and distribute content within a container. It combines the functionality of align-content and justify-content properties into one.

This property is particularly useful for controlling the alignment of items along both the block and inline axes in a grid or flex container.

Definition and Usage

Use place-content when you want to position the whole group of tracks or flex lines inside a container that has extra space. It does not replace place-items, which aligns items inside their own cells.

A single value such as center applies to both axes. Two values let you set block-axis and inline-axis alignment separately.

📝 Syntax

The place-content property can accept one or two values. When two values are provided, the first value applies to the block axis (vertical alignment in horizontal writing modes), and the second value applies to the inline axis (horizontal alignment).

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

• align-content — Specifies the alignment of the content along the block axis.
• justify-content — Specifies the alignment of the content along the inline axis.

Basic Example

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

Syntax Rules

• One value sets both align-content and justify-content.
• Two values set block axis first, then inline axis.
• Works on grid containers and flex containers with wrapped content.
• Most useful when the container is larger than its content tracks or lines.
• Do not confuse with place-items, which targets item alignment inside cells.
• Distribution keywords like space-between need extra free space to show an effect.

🎯 Default Value

The initial value of place-content follows its longhand properties: align-content: normal and justify-content: normal. If you provide only one value, it is used for both axes.

💎 Property Values

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

When Does place-content Matter?

place-content shines when a container has unused space around its tracks or wrapped lines:

• Centered layouts — Put a small grid or flex group in the middle of a large area.
• Dashboard shells — Distribute rows or columns with space-between.
• Card grids — Spread tracks evenly with space-evenly.
• Shorter syntax — Replace two longhand properties with one declaration.

If you only need to align one item inside its cell, use place-items instead.

Examples Gallery

Start with centered grid content, try mixed axis values, use flexbox, and distribute tracks with space-evenly.

<style>
  .container {
    display: grid;
    height: 200px;
    place-content: center;
    border: 2px solid #333;
  }

  .item {
    background-color: #ff5733;
    color: #fff;
    padding: 20px;
  }
</style>

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

<style>
  .container {
    display: grid;
    height: 200px;
    place-content: space-between center;
    border: 2px solid #333;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<style>
  .container {
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    height: 12rem;
  }
</style>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 5rem);
    grid-template-rows: repeat(2, 3.5rem);
    height: 14rem;
    place-content: space-evenly;
  }
</style>

place-content vs align-content and justify-content

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

It is related to but different from place-items, which aligns items inside cells rather than the content tracks as a whole.

/* Shorthand */
.container {
  place-content: space-between center;
}

/* Longhand equivalent */
.container {
  align-content: space-between;
  justify-content: center;
}

💡 Best Practices