place-self
A shorthand property that sets align-self and justify-self at once. Controls the position of individual grid items within their cell.
Class List
| Class | CSS | Description |
|---|---|---|
pss | place-self: start | Place at cell start (top-left) |
psc | place-self: center | Place at cell center |
pse | place-self: end | Place at cell end (bottom-right) |
psst | place-self: stretch | Fill entire cell (default) |
psa | place-self: auto | Inherit parent place-items value |
Visual Comparison
Compares cell positions by applying different place-self values to each item.
3-column grid -- place-self applied per item
psspscpse
start is top-left, center is exact center, end is bottom-right
Usage Examples
<!-- Center align specific item only -->
<div class="dg gtcr3-1fr gar10rem gap16px">
<div>Default (stretch)</div>
<div class="psc">Center aligned</div>
<div>Default (stretch)</div>
</div>
<!-- Individual alignment per item -->
<div class="dg gtcr2-1fr gar10rem gap16px">
<div class="pss">Top left</div>
<div class="pse">Bottom right</div>
<div class="psc">Center</div>
<div class="psst">Fill all</div>
</div>Tips & Notes
place-content vs place-self
place-content is applied to the container to align entire tracks, while place-self is applied to individual items to determine position within their own cell.
stretch is the default
Since psst (stretch) is the default, items fill the entire cell unless explicitly changed. Switching to another value shrinks items to content size.