Tailwind Justify Self
In this article, we’ll explore the different ways you can use Tailwind justify self property to position and align items on a web page.
Tailwind CSS has many useful properties for aligning elements within a layout, and one such property is justify-self.
This is a property used to align an individual grid item along the horizontal axis within its grid cell.
It is used to control the self-alignment of an individual grid item.
Tailwind Justify Self Classes
| Classes | Overview |
| justify-self-auto | This is the default value. The grid item is placed in the center of the cell, and the remaining space is distributed equally on either side. |
| justify-self-start | The grid item is aligned at the start of the cell, towards the left side. |
| justify-self-end | Grid item is aligned to the right side of the container, at the end of the cell. |
| justify-self-center | The grid item is horizontally centered within the cell. |
| justify-self-stretch | In this case, the grid item is stretched to fill the entire width of the cell. |
Justify Self Auto
Tailwind justify self-auto class sets the default justify-self value for grid items within a grid container to auto.
This means that the item will inherit its horizontal alignment from the grid container’s justify-items property.
Syntax
<element class="justify-self-auto">...</element>
In this example, let’s divert our attention to the justify-self-auto class in Tailwind:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium text-slate-800 my-3">Justify Self in Tailwind</p>
<p class="font-medium text-gray-500 text-sm my-3">Using justify-self-auto class</p>
<div class="grid justify-items-stretch grid-cols-2 font-medium">
<div class="justify-self-auto bg-gray-300 rounded m-4 p-2">
1st
</div>
<div class="bg-gray-300 rounded m-4 p-2">2nd</div>
<div class="bg-gray-300 rounded m-4 p-2">3rd</div>
<div class="bg-gray-300 rounded m-4 p-2">4th</div>
<div class="bg-gray-300 rounded m-4 p-2">5th</div>
<div class="bg-gray-300 rounded m-4 p-2">6th</div>
</div>
</body>
</html>
Justify Self Start
Tailwind justify self-start class aligns a grid item to the start edge of the grid’s column axis within a grid container.
This means that the item will be positioned towards the left side of its grid cell, leaving any remaining space towards the right side of the cell.
Syntax
<element class="justify-self-start">...</element>
Now let’s take a closer look at justify-self-start through an example:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium text-slate-800 my-3">Justify Self in Tailwind</p>
<p class="font-medium text-gray-500 text-sm my-3">Using justify-self-start class</p>
<div class="grid justify-items-stretch grid-cols-2 font-medium">
<div class="justify-self-start bg-gray-300 rounded m-4 p-2">
1st
</div>
<div class="bg-gray-300 rounded m-4 p-2">2nd</div>
<div class="bg-gray-300 rounded m-4 p-2">3rd</div>
<div class="bg-gray-300 rounded m-4 p-2">4th</div>
<div class="bg-gray-300 rounded m-4 p-2">5th</div>
<div class="bg-gray-300 rounded m-4 p-2">6th</div>
</div>
</body>
</html>
Justify Self End
Tailwind justify self-end class aligns a grid item to the end of the grid’s column axis within a grid container.
It means that the item will be positioned towards the right side of its grid cell, leaving any remaining space towards the left side.
Syntax
<element class=”justify-self-end”>…</element>
This example will increase your understanding regarding justify-self-end class in Tailwind:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium text-slate-800 my-3">Justify Self in Tailwind</p>
<p class="font-medium text-gray-500 text-sm my-3">Using justify-self-end class</p>
<div class="grid justify-items-stretch grid-cols-2 font-medium">
<div class="justify-self-end bg-gray-300 rounded m-4 p-2">
1st
</div>
<div class="bg-gray-300 rounded m-4 p-2">2nd</div>
<div class="bg-gray-300 rounded m-4 p-2">3rd</div>
<div class="bg-gray-300 rounded m-4 p-2">4th</div>
<div class="bg-gray-300 rounded m-4 p-2">5th</div>
<div class="bg-gray-300 rounded m-4 p-2">6th</div>
</div>
</body>
</html>
Justify Self Center
The justify-self-center utility class in Tailwind horizontally centers a grid item within its grid cell along the grid’s column axis.
This results in the item being positioned at the center of its cell with equal space on either side.
Syntax
<element class="justify-self-center">...</element>
The following example demonstrates the application of justify-self-center class in Tailwind:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium text-slate-800 my-3">Justify Self in Tailwind</p>
<p class="font-medium text-gray-500 text-sm my-3">Using justify-self-center class</p>
<div class="grid justify-items-stretch grid-cols-2 font-medium">
<div class="justify-self-center bg-gray-300 rounded m-4 p-2">
1st
</div>
<div class="bg-gray-300 rounded m-4 p-2">2nd</div>
<div class="bg-gray-300 rounded m-4 p-2">3rd</div>
<div class="bg-gray-300 rounded m-4 p-2">4th</div>
<div class="bg-gray-300 rounded m-4 p-2">5th</div>
<div class="bg-gray-300 rounded m-4 p-2">6th</div>
</div>
</body>
</html>
Tailwind Justify Self Stretch
The justify-self-stretch utility class in Tailwind stretches a grid item within its grid cell to fill the entire width of the column.
This means that the item will be stretched to the width of its grid cell, which can be useful when trying to create a uniform layout where all items have the same width.
Syntax
<element class="justify-self-stretch">...</element>
Below example illustrates the use of justify-self-stretch class in Tailwind:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium text-slate-800 my-3">Justify Self in Tailwind</p>
<p class="font-medium text-gray-500 text-sm my-3">Using justify-self-center class</p>
<div class="grid justify-items-stretch grid-cols-2 font-medium">
<div class="justify-self-stretch bg-gray-300 rounded m-4 p-2">
1st
</div>
<div class="bg-gray-300 rounded m-4 p-2">2nd</div>
<div class="bg-gray-300 rounded m-4 p-2">3rd</div>
<div class="bg-gray-300 rounded m-4 p-2">4th</div>
<div class="bg-gray-300 rounded m-4 p-2">5th</div>
<div class="bg-gray-300 rounded m-4 p-2">6th</div>
</div>
</body>
</html>
