CSS Property: justify-self

The justify-self property aligns a grid item inside its grid cell along the row axis. To have an effect, the element must have space around it. Below are the official values, as specified in the CSS specification, that are well-supported in modern browsers:

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>justify-self: auto</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }

        /* Parent: Grid Container */
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr); /* 4 equally-sized columns */
            gap: 10px; /* Spacing between cells */
            width: 100%; /* Grid container width */
            margin: 20px auto; /* Center-align container */
            border: 2px solid gray; /* Visible border to highlight the container */
            color: #333333; /* text color */
        }

        /* Child elements */
        .grid-item {
            justify-self: auto; /* Default value (follows parent or specific grid setting) */
            aspect-ratio: 3/2; /* Width-to-height ratio: 3:2 */
            height: 10vw; /* Item height */
            border: 1px solid black; /* Child elements border */
            text-align: center; /* Horizontal text alignment */
            line-height: 10vw; /* Vertical content alignment */
        }

        /* Individual item colors */
        .a {
            background: greenyellow;
        }
        .b {
            background: orange;
        }
        .c {
            background: pink;
        }
        .d {
            background: lightblue;
        }
    </style>
</head>
<body>
    <!-- Parent grid div -->
    <div class="grid-container">
        <div class="grid-item a">green yellow</div>
        <div class="grid-item b">orange</div>
        <div class="grid-item c">pink</div>
        <div class="grid-item d">light blue</div>
    </div>
</body>
</html>

RESULT

Supported Values

auto	Default value that aligns the element according to container rules (e.g., justify-items). If justify-items is not set, it behaves like stretch.
normal	Not explicitly explained in the CSS Grid specification, but often behaves similarly to start (depending on the container). Support is partially experimental and not reliable in all browsers.
start	Aligns content to the start of the grid cell (e.g., left in horizontal orientation).
end	Aligns content to the end of the grid cell (e.g., right in horizontal orientation).
center	Aligns content to the center of the grid cell.
stretch	Default behavior where content stretches to fill the cell width (if element width is not explicitly set).
inherit	Element inherits the value from the parent element where justify-items is set.
initial	Sets the value to the default state (auto).

Here are values that sometimes appear as options for justify-items, but are not supported by most browsers or are part of past non-standard implementations or experimental features:

left	Not supported in the CSS Grid standard. The element will never be aligned to the left side of the grid cell using justify-self: left;.
right	Also, not supported in the official specification. Use end instead.
baseline	The CSS Box Alignment specification defines baseline, but this value is not supported for justify-self in Grid Layout. It may work for vertical alignment in other contexts.

Practical Explanations for Unsupported Values

Why are left and right not supported?

left and right are not part of the standard in the CSS Grid specification because CSS uses more semantic values (start and end), which enables better support for language and cultural reading directions (e.g., rtl for languages like Arabic or Hebrew).

What does experimental mean for normal?

The CSS Box Alignment specification defines normal, but browsers do not have a uniform implementation for justify-self in Grid layout. It often behaves like start, but the behavior can be unreliable, so caution is recommended.

What about baseline?

Although baseline can be used for vertical alignment (e.g., with align-self), it is simply not part of the specification for horizontal alignment (with justify-self).

What is recommended to use?

If we want to create fully compatible code, use officially supported CSS values for justify-self:

start (for left alignment)
end (for right alignment)
center (for center alignment)
stretch (for content stretching)

Unsupported values such as left, right, or baseline are best avoided.

All justify-self Examples

auto (Supported)	Default value.	See example
baseline (Not supported)	Existence in specification but not valid for justify-self.	See example
center (Supported)	Element aligned at the cell center.	See example
end (Supported)	Element aligned at the end of the cell.	See example
inherit (Supported)	Inherits value from parent.	See example
initial (Supported)	Resets value to auto	See example
left (Not supported)	Does not work; use start.	See example
normal (Partially supported)	Experimental, unreliable across browsers.	See example
right (Not supported)	Does not work; use end.	See example
start (Supported)	Element aligned at the start of the cell.	See example
stretch (Supported)	Default behavior, stretches the item.	See example