Positional alignment Values

start: Grid items are aligned to the start of the grid area.
left: Aligns grid items to the left within the grid area.
self-start: Aligns the grid items to the start of their respective grid cells along the inline axis (row).

Syntax:

justify-items: start | left | self-start;

end: Align items to the end of the container’s cross axis.
right: Aligns grid items to the right within the grid area.
self-end: Aligns items to the end of their individual flex container.

Syntax:

justify-items: end | right | self-end;

center: Grid items are centered within the grid area.

Syntax:

justify-items: center;

Example:

HTML

<!DOCTYPE html> 
<html>
    <head>
        <title> 
            CSS | justify-items Property 
        </title>
        <style>
            #container{
            display:flex;
            align-items:center;
            justify-content:center;
            }
            .child{
            width: 100px; 
            height: 100px; 
            margin-right:2rem;
            border: 2px solid black; 
            display: grid; 
            }
            #start { 
            justify-items: start;
            } 
            #end { 
            justify-items: end;
            } 
            #center {
            justify-items: center;
            } 
        </style>
    </head>
    <body>
        <center>
            <h1 style="color:green;">w3wiki</h1>
            <div id="container">
                <!--justify-items: start | left | self-start -->
                <div class="child" id="start">
                    <div style="background-color:green;"> 
                        Start 
                    </div>
                    <div style="background-color:Yellow;"> 
                        Left 
                    </div>
                </div>
                <!--justify-items: center -->
                <div class="child" id="center">
                    <div style="background-color:green;">
                        Center
                    </div>
                    <div style="background-color:Yellow;"> 
                        Center 
                    </div>
                </div>
                <!--justify-items: end | right | self-end; -->
                <div class="child" id="end">
                    <div style="background-color:green;"> 
                        End 
                    </div>
                    <div style="background-color:Yellow;"> 
                        right 
                    </div>
                </div>
            </div>
        </center>
    </body>
</html>

Output: The 3 contianers represent the different values of positional alignment.

CSS justify-items Property

The `justify-items` property in CSS is important for aligning items within a grid container along the inline (row) axis. It allows you to control the alignment of grid items in a grid container when they do not explicitly position themselves using grid-area or similar properties.

Similar to `align-items` property for flex containers, justify-items enables you to align grid items horizontally within their grid areas.

Syntax:

justify-items: normal | stretch | <baseline-position> | <overflow-position>? [ <self-position> | left | right ] | 
legacy | positional alignment | Initial | inherit | inherit

Now, let’s understand each of the property values:

Tags:

#CSS #Web Technologies

1. Basic Keyword Values:

3. Baseline alignment values:

Positional alignment Values

CSS justify-items Property

Syntax:

Similar Reads