The CSS justify-self property aligns an individual element, overriding its parent container’s justify-items value.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  justify-items: center; /* overrides this value */
}

.item:nth-child(1) {
  justify-self: start;
}

.item:nth-child(2) {
  justify-self: center;
}

.item:nth-child(3) {
  justify-self: end;
}

.item:nth-child(4) {
  justify-self: stretch;
}

Although justify-self works along the inline axis, its exact behavior depends on the context we are working on. It can be applied to grid items and, more recently, to block layouts as well as absolutely positioned elements.

While there are other types of display layouts (e.g., flex and table), the justify-self property only works in the grid, block, and absolutely-positioned layouts we mentioned.

The justify-self property is defined in the CSS Box Alignment Module Level 3 specification.

Syntax

justify-self: 	auto | <overflow-position>? [ normal | <self-position> | left | right ] | stretch | <baseline-position>

<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
<baseline-position> = [ first | last ]? && baseline

• Initial Value: auto
• Applies to: block-level boxes, absolutely-positioned boxes, and grid items
• Inherited: no
• Percentages: N/a
• Computed value: the specified keyword
• Canonical order: per grammar
• Animation type: discrete

Values

/* Initial Values */
justify-self: auto;
justify-self: normal;

/* <self-position> */
justify-self: center;
justify-self: start;
justify-self: end;

justify-self: left;
justify-self: right;

justify-self: self-start;
justify-self: self-end;

justify-self: flex-start; /* Same as start */
justify-self: flex-end; /* Same as end */

/* stretch */
justify-self: stretch;

/* <baseline-position> */
justify-self: baseline;
justify-self: first baseline;
justify-self: last baseline;

/* Anchor Positioning */
justify-self: anchor-center;

/* <overflow-position> */
justify-self: safe center;
justify-self: unsafe end;

/* Global values */
justify-self: inherit;
justify-self: initial;
justify-self: revert;
justify-self: revert-layer;
justify-self: unset;

auto (Default)

If the element doesn’t have a parent or is absolutely positioned, auto will default to normal. Otherwise, it will take the value defined by its parent justify-items property.

start, center and end

With align-self, we can place an element along its alignment container’s inline axis using start, center and end. While center remains the same regardless of the writing mode, start and end depend on the alignment container’s writing mode.

For example, for left-to-right (ltr) containers, start places the item on the left, while for right-to-left (rtl) it’s on the right.

While flex-start and flex-end are valid values, since justify-self doesn’t work on flex items, they act the same as start and end, respectively.

self-start and self-end

Since start and end depend on the alignment container’s writing mode, we can instead use self-start and self-end to honor the element’s own writing mode.

left and right

If we want to place an item on one of two sides, regardless of the writing mode, we can use the left and right values. These align an element on their respective side.

stretch

With stretch, the element’s width increases to try and fill the alignment container, respecting relevant sizing properties like min-width, max-width or width.

baseline, first baseline and last baseline

In typography, the baseline is an imaginary line upon where most characters in a line of text rest. These lines may vary from element to element depending on their font-family, font-size or font-weight.

Using baseline-related values, we can align elements by their baseline. However, the baseline runs along the inline axis, so we usually align them perpendicularly along the block axis. For example, in English the baseline runs horizontally so we move it up or down to align it.

Since justify-self aligns items along the inline axis but baselines are aligned along the block axis, baseline values most times don’t have the expected result in justify-* properties.

In the case of grid elements, baseline works in one of two ways:

• baseline or first baseline aligns the item’s left edge, keeping items them as close to the start as possible.
• last baseline aligns the item’s left edge, keeping items as close to the end as possible.

In block layout, both baseline values seem to default to start. For absolutely positioned elements, they default to safe start and safe end, respectively.

It will only work if there is more than one element with that type of baseline alignment. Otherwise, baseline/first baseline fallbacks to safe start, and last baseline to safe end

anchor-center

For the case of absolutely positioned elements with a default anchor, the anchor-center let us justify the element so it matches its anchor’s center.

safe and unsafe

If the alignment container is too small or the element is too big, it may overflow outside its alignment container. This isn’t a big issue if the container is scrollable since we could scroll to see the rest of the element. But for some type of alignments (mainly center and end), the element may overflow outside the scrollable region, causing data loss.

In these situations, we can set safe first so that in case of overflow, the item behaves as start. On the contrary, we can set unsafe so it always honors the defined alignment.

normal

Like in everything, what’s normal depends on the context. And for justify-self, this depends on the type of element, whether it is absolutely positioned, and its parent’s layout setting.

As far as “type of element,” I’m referring to whether the element falls in either of these categories:

• Block/Inline. A block element (<div>, <p>, <section>, etc.) tries to take up all the width available, while an inline element (<a>, <span>, <b>, etc.) only takes the necessary space. This distinction will be useful for alignment in block layouts.
• Replaced/Non-replaced. Replaced elements are those whose content is replaced by an external source like an <iframe>, <img> or <video> (here is the exact list). Non-replaced elements are the rest, like <li>, <div> or <section>, etc.

We care about replaced elements since they have an intrinsic size that affects how they are aligned. This means that, in practice, elements with a defined aspect-ratio or defined dimensions act as replaced elements.

With the normal value:

• Absolutely positioned elements depend on the type of element: replaced have a normal value of start, while non-replaced behave as stretch.
• For elements in a block layout, normal lays elements according to the default rules for block layouts. So, block elements still grow to take the available width, while inline elements don’t.
• Elements in a grid container also depend on the type of element. If the element is replaced, it acts as start. Otherwise, it behaves as stretch.

As a rule of thumb, elements will try to stretch unless they are an inline element or have a defined dimension preventing it, in which case, they’ll remain at the start.

Using it With CSS Grid

Inside a grid layout, justify-self justifies elements along the inline axis within their grid area, which is composed of any number of grid cells and can be defined in a variety of ways.

In the next demo, we have four grid items placed each on a grid area. By default, these have a value of stretch so they cover their whole grid area, but we can move them around using both justify- and align- properties.

Using it With a Block Layout

For the purpose of alignment, elements in a block layout can be either be block elements or inline elements, which includes inline-block elements too. The main difference between them is that block elements can be justified within their containing block, while inline elements ignore justify-self.

At the time of writing, alignment in block layouts is something relatively new, which is limited to alignment in the inline axis. In other words, we can only move block elements within the space they usually occupy. Since block elements grow to fill the available width, from an alignment lens, we could say that block elements have a normal value of stretch

One thing you’ll notice is that both baseline and last baseline seem to default to start, instead of aligning the element’s left edge (either to the start or end) like in grid elements.

Using it With Absolute Positioning

Lastly, we can use both justify-self and align-self on absolutely positioned elements, i.e., aligning an item along the inline and block axes, respectively.

Their exact behavior might be a little unintuitive since applying any of the properties to a normal absolute element won’t work:

/* Doesn't work */
.element {
  position: absolute;
  align-self: center;
  justify-self: center;
}

This is because, for absolutely positioned elements, justify-self and align-self align the item within its Inset-Modified Containing Block (IMCB).

By default, the IMCB is the same size as the item, so that means justify-self and align-self don’t have room for any alignment. To fix this, we can set the inset to 0 so that the IMCB is the same size as the element’s containing block.

The containing block is the closest ancestor with a new stacking context. By default, the initial containing block has the same dimensions as the viewport and covers the start of the page.

/* Works */
.element {
  inset: 0;
  position: absolute;
  align-self: center;
  justify-self: center;
}

Additionally, if the absolutely-positioned element had an attached anchor, we could use the anchor-center value to align it with the anchor’s center.

Specification

The justify-self property is defined in the CSS Box alignment Module Level 3 specification, which is currently in Editor’s Drafts.

Browser support

Usage in CSS Flexbox:

Usage in CSS Grid:

Usage in absolute positioning can be found over at Caniuse. At the time of writing, it basically works everywhere but Safari, but it’s supported in Safari Technology Preview so we’ll likely see it with full support soon.

More information

• The Fundamentals of CSS Alignment (Temani Afif)
• CSS Grid Areas (Ahmad Shadeed)