Tailwind CSS tutorial #8: Align Items
Published: 2022-11-10 09:12:55

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

## Align Items
Utilities for controlling how flex and grid items are positioned along a container's cross axis.

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


| Alignment | Tailwind Class | CSS Property |
| ------ | ------ | ------ |
|[Start](#start) | `items-start` | `		align-items: flex-start;`|
|[End](#end) | `items-end` | `align-items: flex-end;`|
|[Center](#center) | `items-center` | `align-items: center;`|
|[Baseline](#baseline) | `items-baseline` | `	align-items: baseline;`|
|[Stretch](#stretch) | `items-stretch	` | `		align-items: stretch;`|

let's see each of this in action,
## **Start** 
Use items-start to align items to the start of the container’s cross axis:
```html
<li class="w-full h-40 flex items-center px-4 py-2">
    <div class="items-start h-full bg-green-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="text-6xl py-6 bg-green-500 text-white px-3 rounded-md">2</span>
      <span class="py-6 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">items-start</div>
    </div>
  </li>
```
**Output:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd0let662a65j5kz6que.png)



## **End**
Use items-end to align items to the end of the container’s cross axis:

```html
 <li class="w-full h-40 flex items-center px-4 py-2">
    <div class="items-end h-full bg-green-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="text-6xl py-6 bg-green-500 text-white px-3 rounded-md">2</span>
      <span class="py-6 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">items-end</div>
    </div>
  </li>
```
**Output**

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



## **Center** 
Use items-center to align items along the center of the container’s cross axis:

```html
 <li class="w-full h-40 flex items-center px-4 py-2">
    <div class="items-center h-full bg-green-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="text-6xl py-6 bg-green-500 text-white px-3 rounded-md">2</span>
      <span class="py-6 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">items-center</div>
    </div>
  </li>
```
**Output:**

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



## **Baseline**
Use items-baseline to align items along the container’s cross axis such that all of their baselines align:
```html
<li class="w-full h-40 flex items-center px-4 py-2">
    <div class="items-baseline h-full bg-green-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="text-6xl py-2 bg-green-500 text-white px-3 rounded-md">2</span>
      <span class="py-6 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">items-baseline</div>
    </div>
  </li>
```
**Output**

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



## **Stretch**
Use items-stretch to stretch items to fill the container’s cross axis:
```html
 <li class="w-full h-40 flex items-center px-4 py-2">
    <div class="items-stretch h-full bg-green-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="text-6xl 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">items-stretch</div>
    </div>
  </li>
```
**Output**

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



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

**Overall Output**


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