DEV Community

Cover image for Tailwind CSS tutorial #5: Alignment - Justify Items
Shubhi✨
Shubhi✨

Posted on

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.

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)