CSS Property: justify-items

The justify-items property is applied to a grid container to align child elements along the row direction. For this property to have any alignment effect, the elements must have available space around them in the row direction. To align elements along the block direction, use the align-items property. According to the CSS specification, the following values are supported for justify-items:

EXAMPLE

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

    <style>
        * {
            box-sizing: border-box;
        }
        div {
            display: grid;
            grid-template-columns: auto auto auto auto;
            justify-items: start;
            aspect-ratio: 3/2;
            border-radius: 6px;
            color: #333333;
        }
        div.a {
            background: greenyellow;
            width: 25%;
        }
        div.b {
            background: orange;
            width: 50%;
        }
        div.c {
            background: pink;
            width: 75%;
        }
        div.d {
            background: lightblue;
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <div class="a">green yellow</div>
    <div class="b">orange</div>
    <div class="c">pink</div>
    <div class="d">light blue</div>
</div>
</body>
</html>

RESULT

Basic values

start: Aligns the content to the start of the grid cell.
end: Aligns the content to the end of the grid cell (i.e., the right side for the horizontal axis).
center: Aligns the content to the center of the grid cell.
stretch (default): Stretches the content to fill the full width of the grid cell (if the width is not defined).

Additional values

inherit: Inherits the value from the parent element.
initial: Sets the value to its default (which is stretch).
unset: If the value is not inherited, it uses the default.

What about right, left, and other values?

Values such as right, left, baseline, normal, and others are not officially supported for the justify-items property. These values may work (or at least partially) in some browsers due to their experimental nature or legacy versions of the standard, but they are not part of the current CSS Grid specification.

All examples of justify-items

baseline	The element is aligned to the baseline of the parent.	See example
center	Aligns the elements to the center.	See example
end	Aligns the elements to the end.	See example
inherit	Inherits the property from the parent element.	See example
initial	Sets to the default value.	See example
left	Aligns the elements to the left.	See example
legacy	Grid items with the justify-self value inherit the value automatically.	See example
normal	Depends on the layout context, but similar to stretch for grid layout.	See example
right	Aligns the elements to the right.	See example
start	Aligns the elements to the start in the row direction.	See example
stretch	Stretches to fill the grid cell if the size in the row direction is not set.	See example