Justify Items

Controls alignment of grid items along their inline (row) axis within their grid areas. While justify-content controls the alignment of the entire grid container's contents, justify-items controls individual grid items within their cells. This is particularly useful for grid layouts where you want consistent alignment of items within their allocated spaces.

Flexbox & Grid1 variant5 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-cols-3 justify-items-start gap-4 bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Start aligned</div>
  <div class="bg-blue-200 p-4 rounded">Start aligned</div>
  <div class="bg-blue-300 p-4 rounded">Start aligned</div>
  <div class="bg-blue-100 p-4 rounded">Start aligned</div>
  <div class="bg-blue-200 p-4 rounded">Start aligned</div>
  <div class="bg-blue-300 p-4 rounded">Start aligned</div>
</div>

Examples

Grid items aligned to the start (left) of their grid cells

<div class="grid grid-cols-3 justify-items-start gap-4 bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Start aligned</div>
  <div class="bg-blue-200 p-4 rounded">Start aligned</div>
  <div class="bg-blue-300 p-4 rounded">Start aligned</div>
  <div class="bg-blue-100 p-4 rounded">Start aligned</div>
  <div class="bg-blue-200 p-4 rounded">Start aligned</div>
  <div class="bg-blue-300 p-4 rounded">Start aligned</div>
</div>

Edit in playground

Grid items centered horizontally within their grid cells

<div class="grid grid-cols-3 justify-items-center gap-4 bg-gray-100 p-4 rounded-lg">
  <div class="bg-green-100 p-4 rounded">Centered</div>
  <div class="bg-green-200 p-4 rounded">Centered</div>
  <div class="bg-green-300 p-4 rounded">Centered</div>
  <div class="bg-green-100 p-4 rounded">Centered</div>
  <div class="bg-green-200 p-4 rounded">Centered</div>
  <div class="bg-green-300 p-4 rounded">Centered</div>
</div>

Edit in playground

Grid items aligned to the end (right) of their grid cells

<div class="grid grid-cols-3 justify-items-end gap-4 bg-gray-100 p-4 rounded-lg">
  <div class="bg-purple-100 p-4 rounded">End aligned</div>
  <div class="bg-purple-200 p-4 rounded">End aligned</div>
  <div class="bg-purple-300 p-4 rounded">End aligned</div>
  <div class="bg-purple-100 p-4 rounded">End aligned</div>
  <div class="bg-purple-200 p-4 rounded">End aligned</div>
  <div class="bg-purple-300 p-4 rounded">End aligned</div>
</div>

Edit in playground

Grid items stretched to fill their grid cells horizontally (default behavior)

<div class="grid grid-cols-3 justify-items-stretch gap-4 bg-gray-100 p-4 rounded-lg">
  <div class="bg-blue-100 p-4 rounded">Stretched</div>
  <div class="bg-blue-200 p-4 rounded">Stretched</div>
  <div class="bg-blue-300 p-4 rounded">Stretched</div>
  <div class="bg-blue-100 p-4 rounded">Stretched</div>
  <div class="bg-blue-200 p-4 rounded">Stretched</div>
  <div class="bg-blue-300 p-4 rounded">Stretched</div>
</div>

Edit in playground

Card layout with items centered in their cells

<!-- Card layout with centered content in each cell -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 justify-items-center p-4 bg-gray-100 rounded-lg">
  <div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden w-full">
    <div class="h-40 bg-blue-200"></div>
    <div class="p-4">
      <h3 class="font-bold mb-2">Card Title 1</h3>
      <p class="text-gray-600">Each card is centered in its grid cell but maintains its width.</p>
    </div>
  </div>
  <div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden w-full">
    <div class="h-40 bg-blue-300"></div>
    <div class="p-4">
      <h3 class="font-bold mb-2">Card Title 2</h3>
      <p class="text-gray-600">Using justify-items-center creates a balanced, centered layout.</p>
    </div>
  </div>
  <div class="max-w-sm bg-white rounded-lg shadow-md overflow-hidden w-full">
    <div class="h-40 bg-blue-400"></div>
    <div class="p-4">
      <h3 class="font-bold mb-2">Card Title 3</h3>
      <p class="text-gray-600">This works well for consistent width items in a grid.</p>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Justify Items utility with different values

Open Interactive Playground

Variants

auto: uses align value from item's justify-self property or stretch if not set; start: items aligned to start of their grid area; end: items aligned to end of their grid area; center: items centered within their grid area; stretch: items stretched to fill their grid area horizontally

autostartendcenterstretch