Tailwind CSS tutorial #5: Alignment – Justify Items

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.

Forma…


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

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 justify-items-auto justify-items: auto;
Start justify-items-start justify-items: start;
End justify-items-end justify-items: end;
Center justify-items-center justify-items: center;
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.

<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

Start

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

<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

End

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

<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

Center

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

<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

Stretch

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

<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

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

Overall Output
Image description

Resources:
tailwind.css

Thank you for reading :), To learn more, check out my blogs on Justify-Content, Responsive Navbar.
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-06T21:41:40+00:00) Tailwind CSS tutorial #5: Alignment – Justify Items. Retrieved from https://www.scien.cx/2022/11/06/tailwind-css-tutorial-5-alignment-justify-items/

MLA
" » Tailwind CSS tutorial #5: Alignment – Justify Items." Shubhangi | Sciencx - Sunday November 6, 2022, https://www.scien.cx/2022/11/06/tailwind-css-tutorial-5-alignment-justify-items/
HARVARD
Shubhangi | Sciencx Sunday November 6, 2022 » Tailwind CSS tutorial #5: Alignment – Justify Items., viewed ,<https://www.scien.cx/2022/11/06/tailwind-css-tutorial-5-alignment-justify-items/>
VANCOUVER
Shubhangi | Sciencx - » Tailwind CSS tutorial #5: Alignment – Justify Items. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/06/tailwind-css-tutorial-5-alignment-justify-items/
CHICAGO
" » Tailwind CSS tutorial #5: Alignment – Justify Items." Shubhangi | Sciencx - Accessed . https://www.scien.cx/2022/11/06/tailwind-css-tutorial-5-alignment-justify-items/
IEEE
" » Tailwind CSS tutorial #5: Alignment – Justify Items." Shubhangi | Sciencx [Online]. Available: https://www.scien.cx/2022/11/06/tailwind-css-tutorial-5-alignment-justify-items/. [Accessed: ]
rf:citation
» Tailwind CSS tutorial #5: Alignment – Justify Items | Shubhangi | Sciencx | https://www.scien.cx/2022/11/06/tailwind-css-tutorial-5-alignment-justify-items/ |

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