CSS justify-self Property

The justify-self property aligns a grid item within its grid cell in the inline direction, which is typically left to right for English pages. It requires available space around the item in the inline direction to have an alignment effect.

Syntax:

justify-self: stretch | normal | auto | baseline | start | end | center | flex-start | 
                    flex-end | self-start | self-end | left | right | safe | unsafe;

Property Values:

Value	Description
stretch	Default value. Content fills the whole width of the cell.
normal	Behaves as ‘start’ in block-level layouts. Ignores in table and flex layouts. Acts as ‘stretch’ in other absolutely positioned boxes.
auto	Default value. Used if justify-items property is located in parent element or defaults to normal value.
baseline	Aligns the alignment baseline of the current box’s first or last baseline with corresponding baseline in shared first or last baseline set of all the boxes.
start	Aligns content to the left of the cell.
end	Aligns content to the right of the cell.
center	Aligns content to the center of the cell.
flex-start	Same as ‘start’ value.
flex-end	Same as ‘end’ value.
self-start	Aligns the item to the left of the aligned container at the beginning of an item.
self-end	Aligns the item to the right of the aligned container at the end of an item.
left	Makes the item pack flush to the left of the alignment container.
right	Makes the item pack flush to the right of the alignment container.
safe	Aligns as ‘start’ if item overflows the alignment container.
unsafe	Aligns as the given value regardless of relative sizes of alignment container and item.

Example 1: In this example, justify-self is not used for the alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        article {
            font-family: sans-serif;
            background-color: green;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 70px;
            grid-gap: 30px;
            width: 700px;
            justify-items: stretch;
            border: solid;
            margin: 20%;
        }

        article span {
            background-color: white;
            color: green;
            margin: 2px;
            text-align: center;
            border: solid;
        }

        article,
        span {
            padding: 5px;
            border-radius: 3px;
            border: solid;
        }
    </style>
</head>

<body>
    <article class="container">
        <span>Beginner</span>
        <span>FOR</span>
        <span>Beginner</span>
        <span>ONLINE</span>
        <span>PORTAL</span>
    </article>
</body>

</html>

Output:

Example 2: In this example, a few of the justify-self values are used for the alignment.

HTML

<!DOCTYPE html>
<html>

<head>
    <style>
        article {
            font-family: sans-serif;
            background-color: green;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 70px;
            grid-gap: 30px;
            width: 700px;
            justify-items: stretch;
            border: solid;
            margin: 20%;
        }

        span:nth-child(2) {
            justify-self: start;
        }

        span:nth-child(3) {
            justify-self: center;
        }

        span:nth-child(4) {
            justify-self: end;
        }

        article span {
            background-color: white;
            color: green;
            margin: 2px;
            text-align: center;
            border: solid;
        }

        article,
        span {
            padding: 5px;
            border-radius: 3px;
            border: solid;
        }
    </style>
</head>

<body>
    <article class="container">
        <span>Beginner</span>
        <span>FOR</span>
        <span>Beginner</span>
        <span>ONLINE</span>
        <span>PORTAL</span>
    </article>
</body>

</html>

Output:

Supported Browsers:

Contact Us