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 | place-self-auto |
place-self: auto; |
| Start | place-self-start |
place-self: start; |
| End | place-self-end |
place-self: end; |
| Center | place-self-center |
place-self: center; |
| 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:
<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:
Start
Use place-self-start to align an item to the start on both axes:
<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:
End
Use place-self-end to align an item to the end on both axes:
<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
Center
Use place-self-center to align an item at the center on both axes:
<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:
Stretch
Use place-self-stretch to stretch an item on both axes:
<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
Full code:
The overall code will be attached to repo link.
Overall Output
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!! 💛
Top comments (0)