Tailwind CSS tutorial #12: Place Self
Tags: webdev, tutorial, css, tailwindcss
Published: 2022-11-14 10:59:26

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

## Place Self

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


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

let's see each of this in action,

## **Auto** 
Use place-self-auto to align an item based on the value of the container’s place-items property:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-auto rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 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">self-auto</div>
  </div>
</li>

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

## **Start** 
Use place-self-start to align an item to the start on both axes:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-start rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 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">self-start</div>
  </div>
</li>

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

## **End**
Use place-self-end to align an item to the end on both axes:
```html
<li class="w-full h-40 flex items-center px-4 py-2">
    <div class="items-stretch h-full bg-yellow-100 justify-items-auto grid grid-cols-3 w-full gap-1">
      <span class="py-2 bg-red-500 text-white px-3 rounded-md">1</span>
      <span class="self-end py-6 bg-green-500 text-white px-3 rounded-md">2</span>
      <span class="py-2 bg-blue-500 text-white px-3 rounded-md">3</span>
    </div>
    <div class="ml-5 text-right w-1/3">
      <div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">self-end</div>
    </div>
  </li>

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

## **Center** 
Use place-self-center to align an item at the center on both axes:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-center rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 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">self-center</div>
  </div>
</li>

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

## **Stretch**
Use place-self-stretch to stretch an item on both axes:
```html
<li class="flex h-40 w-full items-center px-4 py-2">
  <div class="justify-items-auto grid h-full w-full grid-cols-3 items-stretch gap-1 bg-yellow-100">
    <span class="rounded-md bg-red-500 py-2 px-3 text-white">1</span>
    <span class="self-stretch rounded-md bg-green-500 py-6 px-3 text-white">2</span>
    <span class="rounded-md bg-blue-500 py-2 px-3 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">self-stretch</div>
  </div>
</li>

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

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

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

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

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!! 💛