Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Justify Self

Quiz

Tailwind CSS Justify Self is a utility class used to align individual grid items along its inline axis.

Tailwind CSS Justify Self Classes

The following is the list of Tailwind CSS Justify Self classes that help in the effective alignment of grid items individually along its inline axis.

Class	CSS Properties
justify-self-auto	justify-self: auto;
justify-self-start	justify-self: start;
justify-self-end	justify-self: end;
justify-self-center	justify-self: center;
justify-self-stretch	justify-self: stretch;

Functionality of Tailwind CSS Justify Self Classes

justify-self-auto: This class is used to align grid items based on the value of justify-items property of their parent grid container element.
justify-self-start: This class is used to align individual grid items to the start of their grid cells.
justify-self-end: This class is used to align individual grid items to the end of their grid cells.
justify-self-center This class is used to align individual grid items to the center of their grid cells.
justify-self-stretch: This class stretches individual grid items to fill the available space in their grid cells.

Tailwind CSS Justify Self Classes Examples

The following examples will illustrate the Tailwind CSS Justify Self class utility.

Auto Alignment of Grid Items

The justify-self-auto class sets the individual grid items to be positioned based on the value of the grid's justify-items property, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self Auto Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!-- The justify-self-auto class will align individual 
                grid item based on justify-items property of its 
                parent grid container-->
        <div class="bg-lime-300 p-4 justify-self-auto">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Starting Alignment of Grid Items

The justify-self-start class sets the individual grid items to be positioned at the starting of its inline axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self Start Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--The justify-self-start class will align individual 
               grid item at the start of its grid cell-->
        
        <div class="bg-lime-300 p-4 justify-self-start">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Ending Alignment of Grid Items

The justify-self-end class sets the individual grid items to be positioned at the ending of its inline axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self End Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--The justify-self-end class will align individual
               grid item at the end of its inline axis-->
        
        <div class="bg-lime-300 p-4 justify-self-end">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Center Aligned of Grid Items

The justify-self-center class sets the individual grid items to be positioned at the center of its inline axis, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self Center Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--The justify-self-center class will align individual 
               grid item at the center of its inline axis-->
        
        <div class="bg-lime-300 p-4 justify-self-center">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Stretch Alignment of Grid Items

The justify-self-stretch class sets the individual grid items to be stretched to fill the available space of its grid cell, as demonstrated in the example below.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl mb-3">
        Tailwind CSS Justify Self Stretch Class
    </h2>
    <div class="grid grid-cols-3 gap-3 justify-items-stretch">
        <div class="bg-green-500 p-4">
            Item 1
        </div>
        <!--The justify-self-stretch class will stretch individual 
               grid item to fill space available in its inline axis-->
        
        <div class="bg-lime-300 p-4 justify-self-stretch">Item 3</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-green-500 p-4">Item 6</div>
    </div>
</body>

</html>

Print Page