Tailwind CSS - Justify Self

Mastering Grid Item Alignment with Justify Self

In CSS Grid layouts, justify-self is a powerful property for aligning an individual grid item along the main (or inline) axis within its designated grid area. It allows you to override the grid container’s default alignment (justify-items) for specific items, giving you precise control over your layout. This tutorial explores how to effectively use Tailwind’s justify-self utilities.

Core Justify Self Utilities

Tailwind provides a full set of utilities that map directly to the justify-self CSS property.

Class	CSS Properties
justify-self-start	justify-self: start;
justify-self-end	justify-self: end;
justify-self-center	justify-self: center;
justify-self-stretch	justify-self: stretch;
justify-self-auto	justify-self: auto;

Key Concepts: justify-self vs. justify-items

This is a frequent point of confusion for developers new to CSS Grid. Understanding the difference is crucial:

• justify-items: A property set on the grid container. It defines the default justify-self alignment for all items within that grid.
• justify-self: A property set on an individual grid item. It overrides the justify-items value for that specific item only.

Practical Application: A Dashboard Widget Layout

The best way to see justify-self in action is to observe how different items behave within the same grid container. In this example, the parent grid has justify-items-start, which means all items will align to the start by default. We will then use justify-self-* utilities to override this on specific items.

Example: Overriding Grid Alignment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Justify Self Demo</title>
    <!-- Assuming a build process links your compiled CSS -->
    <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="bg-slate-100 p-8">

    <div class="max-w-3xl mx-auto">
        <h2 class="text-2xl font-bold text-slate-800 mb-4">Dashboard Widgets</h2>

        <!--
          The Grid Container
          - `grid-cols-2`: Creates a two-column grid.
          - `gap-4`: Adds space between grid items.
          - `justify-items-start`: Sets the default horizontal alignment for all items to the start.
          - On medium screens (`md`), we change the default to stretch for a different look.
        -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 justify-items-start md:justify-items-stretch bg-slate-300 p-4 rounded-lg">

            <!-- Item 1: Inherits `justify-items-start` from parent -->
            <div class="bg-blue-500 text-white p-4 rounded">
                <h3 class="font-bold">User Profile</h3>
                <p class="text-sm">Default (Starts)</p>
            </div>

            <!-- Item 2: Overridden with `justify-self-end` -->
            <div class="bg-red-500 text-white p-4 rounded justify-self-end">
                <h3 class="font-bold">Logout Button</h3>
                <p class="text-sm">justify-self-end</p>
            </div>

            <!-- Item 3: Overridden with `justify-self-center` -->
            <div class="bg-green-500 text-white p-4 rounded justify-self-center">
                <h3 class="font-bold">Status</h3>
                <p class="text-sm">justify-self-center</p>
            </div>

            <!--
              Item 4: Overridden with `justify-self-stretch`
              This will fill the horizontal space of its grid cell.
            -->
            <div class="bg-purple-500 text-white p-4 rounded justify-self-stretch">
                <h3 class="font-bold">Notifications</h3>
                <p class="text-sm">justify-self-stretch</p>
            </div>

        </div>
    </div>

</body>
</html>

Responsive Control

Like all Tailwind utilities, justify-self can be applied conditionally at different breakpoints. This is essential for creating robust, responsive layouts. In our example, the parent justify-items changes on medium screens (md:justify-items-stretch), and you could similarly apply responsive prefixes to individual items:

<!-- This item is centered on small screens and aligned to the start on medium screens and up -->
<div class="justify-self-center md:justify-self-start ...">...</div>

Real-World Use Cases

• Form Layouts: Aligning a ‘Submit’ button to the end of its grid cell while other input fields stretch.
• Card Grids: Making most cards in a grid stretch to fill the space, but having one featured card with a different alignment.
• Page Headers: Aligning a logo to the start, navigation to the center, and a user menu to the end within a single grid container.