Tailwind CSS tutorial #5: Alignment - Justify Items
Published: 2022-11-06 21:41:40

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

## Justify Item
It is intended to take the place of the CSS justify-items attribute. This class is used to control how grid objects are aligned along their inline axis.

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


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


let's see each of this in action,
## **Auto** 
Grid items on their inline axis are automatically justified using the justify-items-auto class.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="justify-items-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="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>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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-items-auto</div>
  </div>
</li>
```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dkj365ln4h1vy21b4fk.png)

## **Start** 
This class is used to align grid items with the beginning of the inline axis.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="grid w-full grid-cols-3 justify-items-start gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="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>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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-items-start</div>
  </div>
</li>
```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp3wijovfr91no953hhn.png)

## **End**
With this class, grid components are justified against the end of their inline axis.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="grid w-full grid-cols-3 justify-items-end gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="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>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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-items-end</div>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2gps9fon1pft05fewgn.png)

## **Center**
With this class, grid items are justified along their inline axis.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="grid w-full grid-cols-3 justify-items-center gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="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>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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-items-center</div>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0w5kjmlmsq93ifcyz7z.png)

## **Stretch**
Stretching things along their inline axis is accomplished with the justify-items-stretch class.

```html
<li class="flex w-full items-center px-4 py-2">
  <div class="grid w-full grid-cols-3 justify-items-stretch gap-2">
    <span class="rounded-md bg-red-500 px-3 py-2 text-white">1</span>
    <span class="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>
    <span class="rounded-md bg-indigo-500 px-3 py-2 text-white">4</span>
    <span class="rounded-md bg-purple-500 px-3 py-2 text-white">5</span>
    <span class="rounded-md bg-yellow-300 px-3 py-2 text-white">6</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-items-stretch</div>
  </div>
</li>
```
**Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33w5vfhok0yqggt4z10l.png)

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

**Overall Output**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t12858xwpr7ssvcbhhsj.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).
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!! 💛