Tailwind CSS - Justify Items

Tailwind CSS - Justify Items

The Justify Items utilities in Tailwind CSS are used to control how items are aligned along the main (inline or horizontal) axis within their individual grid cells. This is a fundamental concept for creating precise layouts with CSS Grid.

Justify Items Utilities

These classes apply the justify-items CSS property to a grid container.

Class	CSS Properties
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

Key Distinction: justify-items vs. justify-content

This is a common point of confusion for learners. It’s crucial to understand the difference:

• justify-items: Aligns the content inside each grid cell. Imagine it like text-align but for grid items. It works on the items themselves.
• justify-content: Aligns the entire grid of cells within the grid container. It works on the grid container and only has a visible effect if the total width of the grid cells is less than the container’s width.

Practical Example: Aligning Items in a Grid

Let’s demonstrate each utility. To make the alignment clear, we’ll add a background color to the grid cells so you can see their boundaries.

Example: justify-items-start

Items are aligned to the left edge of their cell.

<h3 class="mt-8 text-lg font-semibold">justify-items-start</h3>
<div class="grid grid-cols-3 gap-4 justify-items-start bg-slate-100 p-4 rounded-lg">
  <div class="bg-blue-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-blue-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-blue-500 text-white p-4 rounded">Item 3</div>
</div>

Example: justify-items-end

Items are aligned to the right edge of their cell.

<h3 class="mt-8 text-lg font-semibold">justify-items-end</h3>
<div class="grid grid-cols-3 gap-4 justify-items-end bg-slate-100 p-4 rounded-lg">
  <div class="bg-green-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-green-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-green-500 text-white p-4 rounded">Item 3</div>
</div>

Example: justify-items-center

Items are centered horizontally within their cell. This is great for product grids.

<h3 class="mt-8 text-lg font-semibold">justify-items-center</h3>
<div class="grid grid-cols-3 gap-4 justify-items-center bg-slate-100 p-4 rounded-lg">
  <div class="bg-purple-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-purple-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-purple-500 text-white p-4 rounded">Item 3</div>
</div>

Example: justify-items-stretch (Default)

Items stretch to fill the full width of their cell. This is the default behavior.

<h3 class="mt-8 text-lg font-semibold">justify-items-stretch (Default)</h3>
<div class="grid grid-cols-3 gap-4 justify-items-stretch bg-slate-100 p-4 rounded-lg">
  <div class="bg-red-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-red-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-red-500 text-white p-4 rounded">Item 3</div>
</div>

Responsive Design

You can control item justification at different breakpoints. For example, you might want items to stretch on mobile but be centered on larger screens.

<div class="grid grid-cols-3 gap-4 justify-items-stretch md:justify-items-center bg-slate-100 p-4 rounded-lg">
  <!-- These items will stretch on small screens and center on medium screens and up -->
  <div class="bg-indigo-500 text-white p-4 rounded">Item 1</div>
  <div class="bg-indigo-500 text-white p-2 rounded">Item 2</div>
  <div class="bg-indigo-500 text-white p-4 rounded">Item 3</div>
</div>

Further Learning

To fully master grid alignment, you should also learn the corresponding vertical alignment utilities: Align Items (align-items). Together, justify-items and align-items give you complete control over item placement within a grid cell.