Tailwind CSS tutorial #10: Place Content

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 mult…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Shubhangi✨

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 place-content-start place-content: start;
End place-content-end place-content: end;
Center place-content-center place-content: stretch;
Between place-content-between place-content: between;
Around place-content-around place-content: around;
Eenly place-content-evenly place-content: evenly;
Stretch place-content-center 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:

<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

End

Use place-content-end to to pack items against the end of the block axis:

<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

Center

Use place-content-center to pack items in the center of the block axis:

<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

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.

<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

Around

Use place-content-around distribute grid items such that there is an equal amount of space around each row on the block axis:

<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

Evenly

Use place-content-evenly to distribute grid items such that they are evenly spaced on the block axis:

<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

Stretch

Use place-content-stretch to stretch grid items along their grid areas on the block axis:

<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

Full code:
The overall code will be attached to repo link.

Overall Output

Image description

Image description

Image description

Resources:
tailwind.css

Thank you for reading :), To learn more, check out my blogs on Justify-Content, Responsive Navbar and Justify-Item.
If you liked this article, consider following me on Dev.to for my latest publications. You can reach me on Twitter.

Keep learning! Keep coding!! đź’›


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Shubhangi✨


Print Share Comment Cite Upload Translate Updates
APA

Shubhangi✨ | Sciencx (2022-11-12T09:50:02+00:00) Tailwind CSS tutorial #10: Place Content. Retrieved from https://www.scien.cx/2022/11/12/tailwind-css-tutorial-10-place-content/

MLA
" » Tailwind CSS tutorial #10: Place Content." Shubhangi✨ | Sciencx - Saturday November 12, 2022, https://www.scien.cx/2022/11/12/tailwind-css-tutorial-10-place-content/
HARVARD
Shubhangi✨ | Sciencx Saturday November 12, 2022 » Tailwind CSS tutorial #10: Place Content., viewed ,<https://www.scien.cx/2022/11/12/tailwind-css-tutorial-10-place-content/>
VANCOUVER
Shubhangi✨ | Sciencx - » Tailwind CSS tutorial #10: Place Content. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/12/tailwind-css-tutorial-10-place-content/
CHICAGO
" » Tailwind CSS tutorial #10: Place Content." Shubhangi✨ | Sciencx - Accessed . https://www.scien.cx/2022/11/12/tailwind-css-tutorial-10-place-content/
IEEE
" » Tailwind CSS tutorial #10: Place Content." Shubhangi✨ | Sciencx [Online]. Available: https://www.scien.cx/2022/11/12/tailwind-css-tutorial-10-place-content/. [Accessed: ]
rf:citation
» Tailwind CSS tutorial #10: Place Content | Shubhangi✨ | Sciencx | https://www.scien.cx/2022/11/12/tailwind-css-tutorial-10-place-content/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts