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

Tailwind CSS - Place Items

Quiz

Tailwind CSS Place Items is a utility class used to justify and align items simultaneously.

Tailwind CSS Place Items Classes

The following is the list of Tailwind CSS Place Items classes that help in the effective alignment of flex and grid items.

Class	CSS Properties
place-items-start	place-items: start;
place-items-end	place-items: end;
place-items-center	place-items: center;
place-items-baseline	place-items: baseline;
place-items-stretch	place-items: stretch;

Functionality of Tailwind CSS Place Items Classes

place-items-start: This class replaces CSS place-items: start; property. This class is used to place items at the start of their flex and grid areas on both axes.
place-items-end: This class replaces CSS place-items: end; property. This class is used to place items at the end of their flex and grid areas on both axes.
place-items-center: This class replaces CSS place-items: center; property. This class is used to place items at the center of their flex and grid areas on both axes.
place-items-baseline: This class replaces CSS place-items: baseline; property. This class is used to place items at the baseline of their flex and grid areas on both axes.
place-items-stretch: This class replaces CSS place-items: stretch; property. This class is used to stretch flex and grid items along both axes in order to fill the available space.

Tailwind CSS Place Items Classes Examples

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

Grid Items Start Alignment

The place-Items-start class sets the items to be positioned at the start of both axes, 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 Place Items Start Class
    </h2>
    <div class="grid grid-cols-3 gap-2 p-1 h-44">
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-orange-500 p-4">
                Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-blue-500 p-4">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-start bg-green-300">
            <div class="bg-pink-500 p-4">
                Item 3
            </div>
        </div>
    </div>
</body>

</html>

Grid Items End Alignment

The place-Items-end class sets the items to be positioned at the end of both axes, 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 Place Items End Class
    </h2>
    <div class="grid grid-cols-3 gap-2 p-1 h-44">
        <div class="border-2 border-green-500 p-1 grid
                    place-items-end bg-green-300">
            <div class="bg-orange-500 p-4">
                Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-end bg-green-300">
            <div class="bg-blue-500 p-4">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-end bg-green-300">
            <div class="bg-pink-500 p-4">
                Item 3
            </div>
        </div>
    </div>
</body>

</html>

Grid Items Center Alignment

The place-Items-center class sets the items to be positioned at the center of both axes, 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 Place Items Center Class
    </h2>
    <div class="grid grid-cols-3 gap-2 p-1 h-44">
        <div class="border-2 border-green-500 p-1 grid
                    place-items-center bg-green-300">
            <div class="bg-orange-500 p-4">
                Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-center bg-green-300">
            <div class="bg-blue-500 p-4">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 grid
                    place-items-center bg-green-300">
            <div class="bg-pink-500 p-4">
                Item 3
            </div>
        </div>
    </div>
</body>

</html>

Flex Items Baseline Alignment

The place-Items-baseline class sets the items to be positioned at the baseline of both axes, 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 Place Items Baseline Class
    </h2>
    <div class="flex gap-3 p-1 h-44">
        <div class="border-2 border-green-500 p-1 flex
                    place-items-baseline bg-green-300">
                <div class="bg-red-500 p-3">
                    Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 flex
                    place-items-baseline bg-green-300">
            <div class="bg-blue-500 p-3">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 flex
                    place-items-baseline bg-green-300">
            <div class="bg-green-500 p-3">
                Item 3
            </div> 
        </div>
    </div>
</body>

</html>

Flex Items Stretch Alignment

The place-Items-stretch class sets the items to be stretched along both axes, 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 Place Items Stretch Class
    </h2>
    <div class="flex gap-3 p-1 h-44">
        <div class="border-2 border-green-500 p-1 flex
                    place-items-stretch bg-green-300">
                <div class="bg-red-500 p-3">
                    Item 1
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 flex
                    place-items-stretch bg-green-300">
            <div class="bg-blue-500 p-3">
                Item 2
            </div>
        </div>
        <div class="border-2 border-green-500 p-1 flex
                    place-items-stretch bg-green-300">
            <div class="bg-green-500 p-3">
                Item 3
            </div> 
        </div>
    </div>
</body>

</html>

Print Page