justify-self
Sets the inline axis (horizontal direction) alignment of an individual grid item. Used to override the parent's justify-items to align a specific item differently. Applied to child elements.
Class List
| Class | CSS | Description |
|---|---|---|
jsa | justify-self: auto | Inherits parent justify-items value |
jsn | justify-self: normal | Uses layout mode default (grid: stretch) |
jss | justify-self: start | Places item at cell start |
jsfe | justify-self: flex-end | Places item at cell end |
jsc | justify-self: center | Centers item in cell |
jsst | justify-self: stretch | Stretches item to full cell width |
Visual Comparison
Results of applying each justify-self value to only the center item (B). A and C use the default (stretch).
B에 auto — jsa
Follows parent justify-items (default: stretch)
B에 start — jss
Only B at cell left
B에 end — jsfe
Only B at cell right
B에 center — jsc
Only B at cell center
B에 stretch — jsst
B takes full cell width
Class Details
jsajustify-self: auto
Inherits the parent's justify-items value. Rarely needs explicit specification as it is the default behavior, but used to revert overrides in responsive layouts.
<!-- auto: follows parent's justify-items -->
<div class="dg gtcr3-1fr gap16px jic">
<div class="jsa">Follows parent center</div>
<div class="jsa">Follows parent center</div>
<div class="jsa">Follows parent center</div>
</div>
<!-- Reset override in responsive -->
<div class="dg gtcr3-1fr gap16px">
<div class="jsfe sm-jsa">Desktop right, mobile auto</div>
</div>jsnjustify-self: normal
Uses the default value for the layout mode. Works the same as stretch in grid.
<!-- normal: same as stretch in grid -->
<div class="dg gtcr3-1fr gap16px">
<div class="jsn">Behaves like stretch</div>
</div>jssjustify-self: start
Places only this item at the inline axis start (left) of the cell. Does not affect the alignment of other items.
<!-- Left-align a specific item -->
<div class="dg gtcr3-1fr gap16px">
<div>Default (stretch)</div>
<div class="jss">Left aligned</div>
<div>Default (stretch)</div>
</div>jsfejustify-self: flex-end
Places only this item at the inline axis end (right) of the cell. Used to right-align specific elements within a grid cell.
<!-- Right-align a specific item -->
<div class="dg gtcr3-1fr gap16px">
<div>Default (stretch)</div>
<div>Default (stretch)</div>
<div class="jsfe">Right aligned</div>
</div>
<!-- Grid footer area right aligned -->
<div class="dg gtcr2-1fr gap16px">
<div>Left Content</div>
<div class="jsfe">
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Action</button>
</div>
</div>jscjustify-self: center
Centers only this item along the inline axis of the cell. Useful for centering specific cell content.
<!-- Center-align a specific item -->
<div class="dg gtcr3-1fr gap16px">
<div>Default (stretch)</div>
<div class="jsc">Center aligned</div>
<div>Default (stretch)</div>
</div>jsstjustify-self: stretch
Stretches this item to the full cell width. Used to restore full width for specific items when the parent is jis or jic.
<!-- Stretch a specific item when parent is jic -->
<div class="dg gtcr3-1fr gap16px jic">
<div>Center (follows parent)</div>
<div class="jsst">Full width (override)</div>
<div>Center (follows parent)</div>
</div>justify-self vs justify-items
Understand the difference between justify-items applied to the parent and justify-self applied to the child.
| justify-items | justify-self | |
|---|---|---|
| Applied to | Parent (grid container) | Child (grid item) |
| Scope of effect | All child items | Only that item |
| specificity | Default alignment setting | Overrides justify-items |
| Common Use Cases | Batch alignment for all items | Individual alignment for specific item |
Practical Patterns
Right-align specific items in grid
Default alignment
Default alignment
jsfe (right)
Parent jic + specific item stretch
Center
jsst (full width)
Center
Responsive
With media query prefixes, you can change individual item alignment based on screen size.
<!-- Desktop right, mobile stretch -->
<div class="dg gtcr2-1fr gap16px">
<div>Content</div>
<div class="jsfe sm-jsst">Desktop right, stretch below 768px</div>
</div>
<!-- Desktop center, tablet start -->
<div class="dg gtcr3-1fr gap16px">
<div class="jsc md-jss">Default center, left below 1024px</div>
</div>Tips & Notes
Applied to child elements
justify-self is applied to grid items (children), not the grid container. Applying it to a parent has no effect.
Individual override of justify-items
After setting jic(justify-items: center) on the parent, a specific child can take full width with jsst(justify-self: stretch).
Limited in Flex
justify-self is primarily used in Grid layouts. It is often ignored in Flex containers, so use mla(margin-left: auto) as an alternative in flex.