Tailwind CSS tutorial #10: Place Content
Tags: webdev, tutorial, programming, tailwindcss
Published: 2022-11-12 09:50:02

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

## Place Content
The CSS place-content property is the shorthand of align-content and justify-content property. The shorthand properties in CSS means that you can set the multiple properties values in a single property. Here the place-content property can hold the value of the align-content and justify-content property values.   

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


| Alignment | Tailwind Class | CSS Property |
| ------ | ------ | ------ |
|[Start](#start) | `place-content-start	` | `	place-content: start;`|
|[End](#end) | `place-content-end	` | `place-content: end;`|
|[Center](#center) |  `place-content-center	`| `place-content: stretch;`|
|[Between](#between) | `place-content-between	` | `	place-content: between;`|
|[Around](#around) | `place-content-around	` | `	place-content: around;`|
|[Evenly](#evenly) | `place-content-evenly	` | `	place-content: evenly;`|
|[Stretch](#stretch) | `place-content-stretch` | `		place-content: stretch;`|

let's see each of this in action,

## **Start** 
Use place-content-start to pack items against the start of the block axis:
```html
<li class="flex h-64 w-full items-center px-4 py-2">
  <div class="grid h-48 w-full grid-cols-3 place-content-start gap-1 bg-indigo-100">
    <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">place-content-start</div>
  </div>
</li>

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

## **End**
Use place-content-end to to pack items against the end of the block axis:
```html
<li class="flex h-64 w-full items-center px-4 py-2">
  <div class="grid h-48 w-full grid-cols-3 place-content-end gap-1 bg-indigo-100">
    <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">place-content-end</div>
  </div>
</li>

```
**Output**

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


## **Center** 
Use place-content-center to pack items in the center of the block axis:
```html
<li class="flex h-64 w-full items-center px-4 py-2">
  <div class="grid h-48 w-full grid-cols-3 place-content-center gap-1 bg-indigo-100">
    <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">place-content-center</div>
  </div>
</li>

```
**Output:**


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



## **Between** 
Use place-content-between to distribute grid items along the block axis so that that there is an equal amount of space between each row on the block axis.
```html
<li class="flex h-64 w-full items-center px-4 py-2">
  <div class="grid h-48 w-full grid-cols-3 place-content-between gap-1 bg-indigo-100">
    <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">place-content-between</div>
  </div>
</li>

```
**Output**

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


## **Around** 
Use place-content-around distribute grid items such that there is an equal amount of space around each row on the block axis:
```html
<li class="flex h-64 w-full items-center px-4 py-2">
  <div class="grid h-48 w-full grid-cols-3 place-content-around gap-1 bg-indigo-100">
    <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">place-content-around</div>
  </div>
</li>

```
**Output**

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

## **Evenly** 
Use place-content-evenly to distribute grid items such that they are evenly spaced on the block axis:
```html
<li class="flex h-64 w-full items-center px-4 py-2">
  <div class="grid h-48 w-full grid-cols-3 place-content-evenly gap-1 bg-indigo-100">
    <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">place-content-evenly</div>
  </div>
</li>

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


## **Stretch**
Use place-content-stretch to stretch grid items along their grid areas on the block axis:
```html
<li class="flex h-64 w-full items-center px-4 py-2">
  <div class="grid h-48 w-full grid-cols-3 place-content-stretch gap-1 bg-indigo-100">
    <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">place-content-stretch</div>
  </div>
</li>

```
**Output**

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



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

**Overall Output**

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

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

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