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

Tailwind CSS - Place Content

Quiz

Tailwind CSS Place Content is a utility class used to justify and align content simultaneously.

Tailwind CSS Place Content Classes

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

Class	CSS Properties
place-content-center	place-content: center;
place-content-start	place-content: start;
place-content-end	place-content: end;
place-content-between	place-content: space-between;
place-content-around	place-content: space-around;
place-content-evenly	place-content: space-evenly;
place-content-baseline	place-content: baseline;
place-content-stretch	place-content: stretch;

Functionality of Tailwind CSS Place Content Classes

place-content-center: This class replaces CSS place-content: center; property. This class is used to place content in the center of the block axis.
place-content-start: This class replaces the CSS place-content: start; property. This class is used to place content at the start of the block axis.
place-content-end: This class replaces CSS place-content: end; property. This class is used to place content at the end of the block axis.
place-content-between: This class replaces CSS place-content: space-between; property. This class is used to place content along the block axis with equal space between each item.
place-content-around: This class replaces CSS place-content: space-around; property. This class is used to place content along the block axis with equal space around each item.
place-content-evenly: This class replaces CSS place-content: space-evenly; property. This class is used to place content along the block axis with equal space between each item and the edges.
place-content-baseline: This class replaces CSS place-content: baseline; property. This class places content along the container's block axis so that their baselines align.
place-content-stretch: This class replaces the CSS place-content: stretch; property. This class is used to stretch content to fill the available space of their container.

Tailwind CSS Place Content Classes Examples

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

Grid Items Center Alignment

The place-content-center class sets the content to be positioned at the center of the block 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 Place Content Center Class
    </h2>
    <div class="grid grid-cols-2 gap-4 bg-lime-300 
                h-56 place-content-center">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
    </div>
</body>

</html>

Flex Items Starting & Ending Alignment

The place-content-start & place-content-end class sets the content to be positioned at the starting and ending of the block 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 Place Content Start Class
    </h2>
    <div class="flex flex-wrap gap-3 bg-lime-200
                h-36 place-content-start mb-3">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28 ">Item 2</div>
    </div>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Place Content End Class
    </h2>
    <div class="flex flex-wrap gap-3 bg-lime-200
                h-36 place-content-end">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28 ">Item 2</div>
    </div>
</body>

</html>

Grid Items Between & Around Alignment

The place-content-between & place-content-around class sets the content to be positioned having equal distance between and around each row on the block 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 Place Content Between Class
    </h2>
    <div class="grid grid-cols-2 bg-lime-300 gap-4
                h-44 place-content-between mb-3">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
    </div>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Place Content Around Class
    </h2>
    <div class="grid grid-cols-2 bg-lime-300 gap-4
                h-44 place-content-around">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
    </div>
</body>

</html>

Flex Items Evenly & Baseline Alignment

The place-content-evenly & place-content-baseline classes set the content to be positioned equally along the block axis and baselines aligned, 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 Content Evenly Class
    </h2>
    <div class="flex flex-wrap gap-3 bg-lime-200
                h-36 place-content-evenly mb-3">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28 ">Item 2</div>
    </div>
    <h2 class="text-2xl mb-3">
        Tailwind CSS Place Content Baseline Class
    </h2>
        <div class="flex flex-wrap gap-3 bg-lime-200
                h-36 place-content-baseline">
        <div class="bg-green-500 p-4 w-28">Item 1</div>
        <div class="bg-green-300 p-4 w-28">Item 3</div>
        <div class="bg-green-500 p-4 w-28 ">Item 2</div>
    </div>
</body>

</html>

Grid Items Stretched Alignment

The place-content-stretch class sets the content to be stretched to fill the available space along the block 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 Place Content Stretch Class
    </h2>
    <div class="grid grid-cols-2 bg-lime-300 gap-4
                h-44 place-content-stretch mb-3">
        <div class="bg-green-500 p-4">Item 1</div>
        <div class="bg-green-500 p-4">Item 2</div>
        <div class="bg-green-500 p-4">Item 3</div>
        <div class="bg-green-500 p-4">Item 4</div>
    </div>
</body>

</html>

Print Page