Place Content Property In Tailwind CSS
Tailwind place content property allows you to quickly align and distribute items within a container.
In this article, we’ll take a closer look at Tailwind place-content and how it can be used to create attractive and functional designs.
What is Tailwind Place Content?
Tailwind place content provides a convenient way to align and justify the horizontal and vertical content of an element.
It combines the align-content and justify-content properties into a single declaration.
With this class, you can easily position an element’s content in the center of its container or distribute it evenly across the available space, both horizontally and vertically.
Tailwind Place Content Classes
Tailwind place content property includes a wide range of classes that allow you to control the alignment and distribution of items within a container.
These options include:
| Classes | Overview |
| place-content-center | This class is used to center the content of an element both horizontally and vertically. |
| place-content-start | It is used to align grid or flex items to the start of the container along both the horizontal and vertical axes. |
| place-content-end | This class is used to align grid or flex items to the end of the container along both the horizontal and vertical axes. |
| place-content-between | Using this class the first item positioned at the start edge and the last item positioned at the end edge. The remaining items are spaced evenly. |
| place-content-around | The grid items will be spaced apart with equal spaces between them, and the remaining space will be distributed evenly between the first and last items. |
| place-content-evenly | The grid or flex items will be spaced apart with equal spaces between them, and the space between each item will also be equal to the space between the item and the container’s edge. |
| place-content-baseline | The grid items will be positioned in a way that the text baseline of each item is aligned with the text baseline of the other items. |
| place-content-stretch | Used to stretch the grid items to fill the entire grid container along both the horizontal and vertical axes. |
Tailwind Place Content Center
This class is used to horizontally and vertically center the content of an element.
This class sets the align-content and justify-content properties to center to center the content both horizontally and vertically within the element.
Syntax
<element class="place-content-center">...</element>
To use Tailwind place-content-center class in your web pages, you need to add it to the container element that you want to align and distribute items within.
This example demonstrates the place-content-center class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Place Content class in Tailwind</p>
<p class="text-gray-500 font-medium my-2">Using place-content-center class</p>
<div class=" h-48 w-full flex flex-wrap gap-2
place-content-center
bg-gray-200 border-solid border-2
border-gray-900 font-medium">
<div class="bg-red-500 w-28 h-14 rounded-sm">1st</div>
<div class="bg-blue-400 w-28 h-14 rounded-sm">2nd</div>
<div class="bg-pink-400 w-28 h-14 rounded-sm">3rd</div>
<div class="bg-green-400 w-28 h-14 rounded-sm">4th</div>
<div class="bg-amber-500 w-28 h-14 rounded-sm">5th</div>
<div class="bg-orange-400 w-28 h-14 rounded-sm">6th</div>
</div>
</body>
</html>
Tailwind Place Content Start
The purpose of this class is to align grid or flex items to the start of the container along both the horizontal and vertical axes.
This ensures that the items are positioned towards the top left corner of the container, with no additional spacing or alignment applied.
Syntax
<element class="place-content-start">...</element>
Below example is used for an illustration of the place-content-start class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Place Content class in Tailwind</p>
<p class="text-gray-500 font-medium my-2">Using place-content-start class</p>
<div class=" h-48 w-full flex flex-wrap gap-2
place-content-start
bg-gray-200 border-solid border-2
border-gray-900 font-medium">
<div class="bg-red-500 w-28 h-14 rounded-sm">1st</div>
<div class="bg-blue-400 w-28 h-14 rounded-sm">2nd</div>
<div class="bg-pink-400 w-28 h-14 rounded-sm">3rd</div>
<div class="bg-green-400 w-28 h-14 rounded-sm">4th</div>
<div class="bg-amber-500 w-28 h-14 rounded-sm">5th</div>
<div class="bg-orange-400 w-28 h-14 rounded-sm">6th</div>
</div>
</body>
</html>
Tailwind Place Content End
This class is utilized to align grid or flex items to the end of the container along both horizontal and vertical axes.
This means that the items will be positioned towards the bottom right corner of the container, with no additional spacing or alignment applied.
Syntax
<element class="place-content-end">...</element>
Let’s explore the place-content-end class in Tailwind through an example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Place Content class in Tailwind</p>
<p class="text-gray-500 font-medium my-2">Using place-content-end class</p>
<div class=" h-48 w-full flex flex-wrap gap-2
place-content-end
bg-gray-200 border-solid border-2
border-gray-900 font-medium">
<div class="bg-red-500 w-28 h-14 rounded-sm">1st</div>
<div class="bg-blue-400 w-28 h-14 rounded-sm">2nd</div>
<div class="bg-pink-400 w-28 h-14 rounded-sm">3rd</div>
<div class="bg-green-400 w-28 h-14 rounded-sm">4th</div>
<div class="bg-amber-500 w-28 h-14 rounded-sm">5th</div>
<div class="bg-orange-400 w-28 h-14 rounded-sm">6th</div>
</div>
</body>
</html>
Tailwind Place Content Between
This class is used to evenly distribute the grid or flex items along the main axis, while maintaining equal spacing between the items.
This means that the first item will be positioned at the start of the container, the last item will be positioned at the end of the container, and the remaining items will be spaced evenly between them.
Syntax
<element class="place-content-between">...</element>
The following example revolves around the place-content-between class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Place Content class in Tailwind</p>
<p class="text-gray-500 font-medium my-2">Using place-content-between class</p>
<div class=" h-48 w-full flex flex-wrap gap-2
place-content-between
bg-gray-200 border-solid border-2
border-gray-900 font-medium">
<div class="bg-red-500 w-28 h-14 rounded-sm">1st</div>
<div class="bg-blue-400 w-28 h-14 rounded-sm">2nd</div>
<div class="bg-pink-400 w-28 h-14 rounded-sm">3rd</div>
<div class="bg-green-400 w-28 h-14 rounded-sm">4th</div>
<div class="bg-amber-500 w-28 h-14 rounded-sm">5th</div>
<div class="bg-orange-400 w-28 h-14 rounded-sm">6th</div>
</div>
</body>
</html>
Tailwind Place Content Around
This class is used to distribute the grid or flex items evenly in the container along both the horizontal and vertical axes.
This means that the items will be spaced apart with equal spaces between them, and the remaining space will be distributed evenly between the first and last items.
Syntax
<element class="place-content-around">...</element>
The following example provides a brief overview of the place-content-around class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Place Content class in Tailwind</p>
<p class="text-gray-500 font-medium my-2">Using place-content-around class</p>
<div class=" h-48 w-full flex flex-wrap gap-2
place-content-around
bg-gray-200 border-solid border-2
border-gray-900 font-medium">
<div class="bg-red-500 w-28 h-14 rounded-sm">1st</div>
<div class="bg-blue-400 w-28 h-14 rounded-sm">2nd</div>
<div class="bg-pink-400 w-28 h-14 rounded-sm">3rd</div>
<div class="bg-green-400 w-28 h-14 rounded-sm">4th</div>
<div class="bg-amber-500 w-28 h-14 rounded-sm">5th</div>
<div class="bg-orange-400 w-28 h-14 rounded-sm">6th</div>
</div>
</body>
</html>
Tailwind Content Evenly
The purpose of this class is to evenly distribute the grid or flex items in the container along both the horizontal and vertical axes.
This creates equal spacing between each item and the container’s edges, as well as between each item.
Syntax
<element class="place-content-evenly">...</element>
The example below makes it easy to grasp the concept of place-content-evenly class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Place Content class in Tailwind</p>
<p class="text-gray-500 font-medium my-2">Using place-content-evenly class</p>
<div class=" h-48 w-full flex flex-wrap gap-2
place-content-evenly
bg-gray-200 border-solid border-2
border-gray-900 font-medium">
<div class="bg-red-500 w-28 h-14 rounded-sm">1st</div>
<div class="bg-blue-400 w-28 h-14 rounded-sm">2nd</div>
<div class="bg-pink-400 w-28 h-14 rounded-sm">3rd</div>
<div class="bg-green-400 w-28 h-14 rounded-sm">4th</div>
<div class="bg-amber-500 w-28 h-14 rounded-sm">5th</div>
<div class="bg-orange-400 w-28 h-14 rounded-sm">6th</div>
</div>
</body>
</html>
Tailwind Place Content Baseline
This class is used to align the baselines of the grid or flex items with the baseline of the container along both the horizontal and vertical axes.
This means that the text baseline of each item will be aligned with the text baseline of the other items
Syntax
<element class="place-content-baseline">...</element>
The following example showcases an implementation of the place-content-baseline class in Tailwind:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Place Content class in Tailwind</p>
<p class="text-gray-500 font-medium my-2">Using place-content-baseline class</p>
<div class=" h-48 w-full flex flex-wrap gap-2
place-content-baseline
bg-gray-200 border-solid border-2
border-gray-900 font-medium">
<div class="bg-red-500 w-28 h-14 rounded-sm">1st</div>
<div class="bg-blue-400 w-28 h-14 rounded-sm">2nd</div>
<div class="bg-pink-400 w-28 h-14 rounded-sm">3rd</div>
<div class="bg-green-400 w-28 h-14 rounded-sm">4th</div>
<div class="bg-amber-500 w-28 h-14 rounded-sm">5th</div>
<div class="bg-orange-400 w-28 h-14 rounded-sm">6th</div>
</div>
</body>
</html>
Tailwind Place Content Stretch
This class ensures that the grid or flex items are expanded to fill the entire container along both the horizontal and vertical axes.
This means that the items will be stretched to take up all the available space in the container, regardless of their original size, and they will fill the container without any additional spacing or alignment applied.
Syntax
<element class="place-content-stretch">...</element>
The place-content-stretch class is demonstrated in the example below:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Place Content class in Tailwind</p>
<p class="text-gray-500 font-medium my-2">Using place-content-stretch class</p>
<div class=" h-48 w-full flex flex-wrap gap-2
place-content-stretch
bg-gray-200 border-solid border-2
border-gray-900 font-medium">
<div class="bg-red-500 w-28 h-14 rounded-sm">1st</div>
<div class="bg-blue-400 w-28 h-14 rounded-sm">2nd</div>
<div class="bg-pink-400 w-28 h-14 rounded-sm">3rd</div>
<div class="bg-green-400 w-28 h-14 rounded-sm">4th</div>
<div class="bg-amber-500 w-28 h-14 rounded-sm">5th</div>
<div class="bg-orange-400 w-28 h-14 rounded-sm">6th</div>
</div>
</body>
</html>
