Justify Self

Controls the alignment of an individual grid item along the inline (row) axis within its grid cell. While justify-items applies to all items in a grid, justify-self lets you override that behavior for specific items. This gives you precise control over the horizontal positioning of individual elements in a grid layout.

Flexbox & Grid1 variant3 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded-lg">
  <div class="justify-self-start bg-blue-100 p-4 rounded">Start</div>
  <div class="justify-self-center bg-blue-200 p-4 rounded">Center</div>
  <div class="justify-self-end bg-blue-300 p-4 rounded">End</div>
  <div class="justify-self-stretch bg-blue-400 p-4 rounded">Stretch</div>
  <div class="bg-blue-500 p-4 rounded text-white">Default</div>
  <div class="bg-blue-600 p-4 rounded text-white">Default</div>
</div>

Examples

Grid with different justify-self values applied to individual items

<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4 rounded-lg">
  <div class="justify-self-start bg-blue-100 p-4 rounded">Start</div>
  <div class="justify-self-center bg-blue-200 p-4 rounded">Center</div>
  <div class="justify-self-end bg-blue-300 p-4 rounded">End</div>
  <div class="justify-self-stretch bg-blue-400 p-4 rounded">Stretch</div>
  <div class="bg-blue-500 p-4 rounded text-white">Default</div>
  <div class="bg-blue-600 p-4 rounded text-white">Default</div>
</div>

Edit in playground

Form with labels right-aligned and inputs left-aligned using justify-self

<!-- Form with label and input alignment -->
<div class="grid grid-cols-[200px_1fr] gap-4 p-4 bg-gray-100 rounded-lg max-w-lg">
  <label class="justify-self-end self-center font-medium">Username:</label>
  <input type="text" class="justify-self-start px-3 py-2 border rounded">
  
  <label class="justify-self-end self-center font-medium">Email:</label>
  <input type="email" class="justify-self-start px-3 py-2 border rounded">
  
  <label class="justify-self-end self-center font-medium">Password:</label>
  <input type="password" class="justify-self-start px-3 py-2 border rounded">
  
  <div class="col-span-2 justify-self-center mt-2">
    <button class="px-4 py-2 bg-blue-500 text-white rounded">Submit</button>
  </div>
</div>

Edit in playground

Dashboard with different alignments for various components

<!-- Dashboard with mixed content alignment -->
<div class="grid grid-cols-3 gap-6 p-6 bg-gray-100 rounded-lg">
  <div class="col-span-3 justify-self-center bg-white p-4 rounded-lg shadow-md w-2/3 text-center">
    <h1 class="text-2xl font-bold mb-2">Dashboard Overview</h1>
    <p>This header uses justify-self-center to center it in the grid</p>
  </div>
  
  <div class="bg-white p-4 rounded-lg shadow-md h-40 flex items-center justify-center">
    <div class="text-center">
      <div class="text-2xl font-bold">86%</div>
      <div class="text-gray-500">Completion</div>
    </div>
  </div>
  
  <div class="justify-self-stretch bg-white p-4 rounded-lg shadow-md h-40">
    <h2 class="font-bold mb-2">Activity</h2>
    <div class="flex flex-col gap-2">
      <div class="h-4 bg-blue-100 rounded w-3/4"></div>
      <div class="h-4 bg-blue-200 rounded w-1/2"></div>
      <div class="h-4 bg-blue-300 rounded w-4/5"></div>
    </div>
  </div>
  
  <div class="justify-self-end bg-white p-4 rounded-lg shadow-md h-40 w-5/6">
    <h2 class="font-bold mb-2">Notifications</h2>
    <ul class="text-sm space-y-1">
      <li class="py-1 border-b">New message received</li>
      <li class="py-1 border-b">Task completed</li>
      <li class="py-1">System update</li>
    </ul>
  </div>
  
  <div class="col-span-3 justify-self-stretch bg-white p-4 rounded-lg shadow-md">
    <h2 class="font-bold mb-2">Recent Activity</h2>
    <p>This footer stretches across the entire grid width</p>
  </div>
</div>

Edit in playground

Live Preview

Try the Justify Self utility with different values

Open Interactive Playground

Variants

auto: uses inherited value or stretch; start: aligns item to start of its grid area; end: aligns item to end of its grid area; center: centers item within its grid area; stretch: stretches item to fill its grid area horizontally

autostartendcenterstretch