Tailwind CSS tutorial #6: Alignment - Justify Self
Tags: webdev, tutorial, tailwindcss
Published: 2022-11-07 15:44:14

In the article, we will go into detail on how to use `justify-self`.

## Justify Self
In a Tailwind CSS Grid, the align-justify-self property is used to describe the alignment of a content's location in relation to the proper axis.

**Format**
> `justify-self-{alignment}`


| Alignment | Tailwind Class | CSS Property |
| ------ | ------ | ------ |
|[Auto](#auto) | `justify-self-auto` | `	justify-self: auto;`|
|[Start](#start) | `justify-self-start` | `	justify-self: start;`|
|[End](#end) | `justify-self-end` | `justify-self: end;`|
|[Center](#center) | `justify-self-center` | `	justify-self: center;`|
|[Stretch](#stretch) | `justify-self-stretch` | `	justify-self: stretch;`|


let's see each of this in action,
## **Auto** 
It defaults to the normal value or the value specified by the justify-self property found in the parent element. It has the standard setting.
It is the value used to align an self according to the justify-self class value of the grid.
```html
<li class="flex w-full items-center px-4 py-2">
  <div class="justify-self-auto grid w-full grid-cols-3 gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="justify-self-auto rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">justify-self-auto</div>
  </div>
</li>

```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1k9hwchmi2uj1qh22yu.png)



## **Start** 
It permits the content to align itself with the cell's left side.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="justify-self-auto grid w-full grid-cols-3 gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="justify-self-start rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">justify-self-start</div>
  </div>
</li>

```
**Output:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7b6jmguuskj15baydd0.png)



## **End**
It permits the content to align itself with the cell's right side.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="justify-self-auto grid w-full grid-cols-3 gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="justify-self-end rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">justify-self-end</div>
  </div>
</li>

```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwckr4ruvtmygvfex1op.png)

## **Center**
It enables the content to align with the cell's centre.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="justify-self-auto grid w-full grid-cols-3 gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="justify-self-center rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">justify-self-center</div>
  </div>
</li>

```
**Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v530sw2vq1x2mrb0bxnt.png)



## **Stretch**
It makes the content fill the entire width of the cell and is the default value for this property.
```html
<li class="flex w-full items-center px-4 py-2">
  <div class="justify-self-auto grid w-full grid-cols-3 gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="justify-self-stretch rounded-md bg-green-500 px-3 py-2 text-white">2</span>
    <span class="rounded-md bg-blue-500 px-3 py-2 text-white">3</span>
  </div>
  <div class="ml-5 w-1/3 text-right">
    <div class="rounded-2 inline-block whitespace-nowrap rounded bg-pink-500 px-2 py-1 font-mono text-xs font-semibold text-white">justify-self-stretch</div>
  </div>
</li>

```
**Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4mvoxav3o757p4rbfek.png)


**Full code:**
The overall code will be attached to [repo ](https://github.com/codewithshubhi/learn-tailwind-css/blob/main/Justify-self.html)link.

**Overall Output**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wujalm2howel3p0pjoip.png)

**Resources:**
[tailwind.css](https://tailwindcss.com/docs/justify-content)

Thank you for reading :), To learn more, check out my blogs on [Justify-Content](https://dev.to/shubhicodes/tailwind-css-tutorial-4-alignment-justify-content-3m20), [Responsive Navbar](https://dev.to/shubhicodes/tailwind-css-tutorial-3-responsive-navbar-47ip) and [Justify-Item](https://dev.to/shubhicodes/tailwind-css-tutorial-5-alignment-justify-items-4mci).
If you liked this article, consider following me on [Dev.to](https://dev.to/shubhicodes) for my latest publications. You can reach me on [Twitter](https://twitter.com/heyShubhi).

Keep learning! Keep coding!! 💛