CSS place-self Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS place-self overriding alignment on one grid item
Definition

Definition and Usage

The place-self property is a shorthand for align-self and justify-self. Set it on one item to override how that item aligns inside its grid cell.

The default is auto, which follows the container’s place-items. One value sets both axes. Two values set block first, then inline. Clearest and most useful on grid items.

Standard-track.

Not deprecated. Baseline widely available. Put it on the child, not on the container.

Limited support anchor-center

The anchor-center keyword is newer and not ready for everyday use. Prefer center, start, end, auto, and stretch.

Syntax

CSS Syntax

syntax.css
place-self: <align-self> <justify-self>? | initial | inherit;

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

Values

Property Values

ValueDescriptionTry it
autoDefault. Follow the container’s item alignmentTry it
centerCenter this item in its cell on both axesTry it
start endBlock axis start; inline axis endTry it
endPack this item toward the end of both axesTry it
initialResets to autoTry it
inheritTakes the parent’s place-selfTry it
Approach

How to Use place-self

Align most items on the container, then override one child.

  1. Set display: grid and a default with place-items.
  2. Give cells spare room (tracks larger than the items).
  3. Set place-self on the one item that should differ.
  4. Leave other items at auto so they keep following the container.
PieceRequired?Role
Grid (or flex) itemYesThe child that receives place-self
Cell larger than itemFor positional keywordsWithout spare room, overrides are hard to see
Container place-itemsRecommendedDefault for siblings; makes the override obvious
One or two keywordsYesOne value for both axes, or block then inline
Try it

Live Preview

Container uses place-items: start. Only item B changes with place-self.

A, C, and D stay at the start of their cells. B is the override.

Grid
A
B
C
D

place-self: center — B is centered; siblings stay at start.

Code

CSS Examples

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

Example 1 — Center One Item

Container starts items. Only B is centered with place-self.

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

  div {
    width: 48px;
    height: 36px;
  }

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

<section>
  <div>A</div>
  <div class="b">B</div>
  <div>C</div>
  <div>D</div>
</section>
Try It Yourself

How It Works

  1. Set a default on the container. place-items: start packs every item to the start of its cell.
  2. Keep items smaller than cells. Fixed width and height leave room to see alignment.
  3. Override one child. place-self: center on .b centers only B.
  4. Siblings stay put. A, C, and D still follow place-items: start.

Example 2 — Two Different Axes

First value is the block axis. Second value is the inline axis.

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

  div {
    width: 48px;
    height: 36px;
  }

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

<section>
  <div>A</div>
  <div class="b">B</div>
  <div>C</div>
  <div>D</div>
</section>
Try It Yourself

How It Works

  1. Same container default. Everyone still starts at place-items: start.
  2. First keyword is block. start is align-self (top of B’s cell).
  3. Second keyword is inline. end is justify-self (right edge in LTR).
  4. Result. B sits in the top-right of its cell; the others stay top-left.

Example 3 — Follow the Container

auto is the default. The item uses the container’s place-items.

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

  div {
    width: 48px;
    height: 36px;
  }

  .b {
    place-self: auto;
  }
</style>

<section>
  <div>A</div>
  <div class="b">B</div>
  <div>C</div>
  <div>D</div>
</section>
Try It Yourself

How It Works

  1. Change the container default. place-items: end packs every item to the end of its cell.
  2. Use the initial value. place-self: auto means B does not invent its own alignment.
  3. Match the siblings. B looks the same as A, C, and D because it follows the container.
  4. When to write auto. Useful when resetting an override, or teaching that auto means “use place-items.”

Edge Cases & Pitfalls

If the override seems missing, one of these is usually why.

target

Set it on the item, not the container

Container alignment is place-items. place-self belongs on the child you want to move.

size

A full-size item hides the change

If the item already fills the cell, center and end look the same. Use a smaller item size to see the override.

auto

auto is not a fixed position

auto copies the container’s item alignment. Change place-items and the auto item moves with it.

flex

Justify half is mainly a grid story

align-self works in flex. justify-self is primarily for grid, so two-axis place-self is clearest on grid items.

order

Remember block then inline

place-self: start end is not the same as end start. First = align-self, second = justify-self.

Compatibility

Browser Support

place-self is a browser layout property for grid and related alignment. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since Jan 2020

place-self

Chrome 59+, Firefox 45+, Safari 11+, Edge 79+, Opera 46+, Samsung Internet 7.2+. Internet Explorer has no support.

97% Modern browser support
Google Chrome 59+
Full support
Mozilla Firefox 45+
Full support
Apple Safari 11+
Full support
Microsoft Edge 79+
Full support
Opera 46+
Full support
Samsung Internet 7.2+
Full support
Internet Explorer No support
None
place-self Widely supported

Bottom line: Safe in current browsers for common keywords. For Internet Explorer, set align-self and justify-self as separate longhands. Treat anchor-center as progressive enhancement.

Remember

Key Takeaways

  • Role: shorthand to override one item’s alignment (align-self + justify-self).
  • Common values: auto, center, start end, end.
  • Initial value: auto. Not inherited.
  • Pairing: default with place-items on the container; override with place-self on the child.

One line: place-self is how one grid item breaks away from the container’s place-items.

Frequently Asked Questions

It is a shorthand for align-self and justify-self. Set it on one item to override how that item aligns inside its grid cell (or flex area).
place-items is set on the container and aligns all children. place-self is set on one child and overrides the container for that item only.
The initial value is auto. The item then follows the container's align-items and justify-items (or place-items) values.
A single value sets both align-self and justify-self. For example, place-self: center centers that one item on both axes.
align-self works on flex items. justify-self mainly applies in grid. place-self is clearest and most useful on grid items.
It is Baseline and widely available since January 2020: Chrome 59+, Firefox 45+, Safari 11+, Edge 79+. Internet Explorer does not support it. It is a browser layout property, not a Node.js feature.

Next: pointer-events

Learn how to control whether an element can be the target of pointer input.

pointer-events tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS place-items Property CSS pointer-events Property