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

Tailwind CSS - Justify Items

Quiz

Tailwind CSS Justify Items is a utility class used to align grid items along their inline axis or horizontal alignment of grid items within their grid cells.

Tailwind CSS Justify Items Classes

The following is the list of Tailwind CSS Justify Items Classes that help in the effective alignment of grid items along their inline axis.

Class	CSS Properties
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

Functionality of Tailwind CSS Justify Items Classes

justify-items-start: This class is used to align grid items to the start of their grid cells.
justify-items-end: This class is used to align grid items to the end of their grid cells.
justify-items-center This class is used to align grid items to the center of their grid cells.
justify-items-stretch: This class stretches grid items to fill the available space in their grid cells.

Tailwind CSS Justify Items Classes Examples

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

Grid Items Starting Alignment

The justify-items-start class sets the grid items to be positioned at the start of their cells, 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 Items Start Class
    </h2>
    <div class="grid grid-cols-3 gap-4 justify-items-start 
                border-2 border-green-500 p-2">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-lime-300 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-lime-300 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-lime-300 p-4">Item 6</div>
    </div>
</body>

</html>

Grid Items Ending Alignment

The justify-items-end class sets the grid items to be positioned at the end of their cells, 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 Items End Class
    </h2>
    <div class="grid grid-cols-3 gap-4 justify-items-end 
                border-2 border-green-500 p-2">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-lime-300 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-lime-300 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-lime-300 p-4">Item 6</div>
    </div>
</body>

</html>

Grid Items Center Alignment

The justify-items-center class sets the grid items to be positioned at the center of their cells, 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 Items Center Class
    </h2>
    <div class="grid grid-cols-3 gap-4 justify-items-center 
                border-2 border-green-500 p-2">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-lime-300 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-lime-300 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-lime-300 p-4">Item 6</div>
    </div>
</body>

</html>

Grid Items Stretched Alignment

The justify-items-stretch class stretches the grid items to fill the available space in their grid cells, 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 Items Stretch Class
    </h2>
    <div class="grid grid-cols-3 gap-4 justify-items-stretch 
                border-2 border-green-500 p-2">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-lime-300 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-lime-300 p-4">Item 4</div>
        <div class="bg-green-500 p-4">Item 5</div>
        <div class="bg-lime-300 p-4">Item 6</div>
    </div>
</body>

</html>

Print Page