CSS place-self Property

What You’ll Learn

The place-self property is a shorthand for align-self and justify-self. It aligns one item inside its cell without changing every sibling.

Introduction

The place-self property in CSS is a shorthand property that allows you to set both the align-self and justify-self properties in a single declaration.

This property is particularly useful when working with CSS Grid, as it provides a convenient way to align an individual grid item within its grid area both horizontally and vertically.

Definition and Usage

Set place-items on the container for the default alignment of all children, then use place-self on one child when that item needs different placement.

This pattern is common for featured cards, highlighted tiles, or any layout where one element should break the grid’s default alignment.

📝 Syntax

The syntax for the place-self property is straightforward. You can specify one or two values, where the first value sets the align-self property and the second value sets the justify-self property.

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

If only one value is provided, it will apply to both align-self and justify-self.

Basic Example

.centered {
  place-self: center;
}

Syntax Rules

• Apply place-self on the child item, not the container.
• One value sets both align-self and justify-self.
• Two values set block axis first, then inline axis.
• auto inherits alignment from the container’s place-items rule.
• Most powerful in grid layouts with explicit cell areas.
• Use when only one item needs a different position inside its cell.

🎯 Default Value

The default value of the place-self property is auto. This means the grid item will follow the default alignment specified by the grid container.

💎 Property Values

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

When Does place-self Matter?

place-self is the right tool when one item needs custom placement:

• Featured tile — Center or enlarge one card in a dashboard grid.
• Offset badge — Push one element to a corner of its cell.
• Exception layouts — Keep container defaults but break one rule.
• Less markup — Avoid wrapper divs just to reposition one child.

If every item should align the same way, use place-items on the container instead.

Examples Gallery

Start with the reference centered item, override one cell with two values, stretch a single item, and highlight a featured card.

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
  }

  .centered {
    place-self: center;
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item centered">Centered Item</div>
  <div class="item">Item 3</div>
</div>

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

  .corner {
    place-self: end start;
  }
</style>

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

  .fill-cell {
    place-self: stretch;
  }
</style>

<style>
  .dashboard {
    display: grid;
    place-items: start;
  }

  .featured {
    place-self: center;
  }
</style>

place-self vs place-items

place-items sets the default alignment for all children on the container. place-self overrides that default for one item.

It is shorthand for align-self and justify-self.

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

.featured {
  place-self: center;
}

💡 Best Practices