Menu

Tailwind CSS Justify Self

Justify Self is a CSS property that allows you to control the alignment of individual grid items along the inline axis in a CSS Grid layout.

This document will provide a breakdown of the justify-self utilities in Tailwind CSS, explaining how to apply them for different alignment needs, manage responsive designs, and handle hover or focus states.

ClassPropertiesExample
justify-self-autojustify-self: auto;<div className="justify-self-auto"></div>
justify-self-startjustify-self: start;<div className="justify-self-start"></div>
justify-self-endjustify-self: end;<div className="justify-self-end"></div>
justify-self-centerjustify-self: center;<div className="justify-self-center"></div>
justify-self-stretchjustify-self: stretch;<div className="justify-self-stretch"></div>

Overview of Justify Self

Justify Self Auto

The auto value is the default behavior of justify-self. It follows the alignment properties set at the grid container level. Use this class when no specific alignment is needed for a particular grid item.

This is a live editor. Play around with it!
export default function AutoAlignment() {
  return (
    <div className="grid grid-cols-3 gap-4 h-screen w-screen bg-gray-100">
      {/* Auto alignment */}
      <div className="justify-self-auto bg-blue-500 h-16 w-16"></div>
      <div className="justify-self-auto bg-green-500 h-16 w-16"></div>
      <div className="justify-self-auto bg-red-500 h-16 w-16"></div>
    </div>
  );
}

Justify Self Start

The start value aligns the selected grid item at the beginning of the inline axis.

This is a live editor. Play around with it!
export default function JustifyStart() {
  return (
    <div className="grid grid-cols-3 gap-4 h-screen w-screen bg-gray-100">
      <div className="justify-self-start bg-blue-500 h-16 w-16"></div>
      <div className="justify-self-start bg-green-500 h-16 w-16"></div>
      <div className="justify-self-start bg-red-500 h-16 w-16"></div>
    </div>
  );
}

Justify Self Center

The center value aligns the grid item horizontally centered within its grid area.

This is a live editor. Play around with it!
export default function JustifyCenter() {
  return (
    <div className="grid grid-cols-3 gap-4 h-screen w-screen bg-gray-100">
      <div className="justify-self-center bg-blue-500 h-16 w-16"></div>
      <div className="justify-self-center bg-green-500 h-16 w-16"></div>
      <div className="justify-self-center bg-red-500 h-16 w-16"></div>
    </div>
  );
}

Justify Self End

The end value aligns the grid item at the end of the inline axis.

This is a live editor. Play around with it!
export default function JustifyEnd() {
  return (
    <div className="grid grid-cols-3 gap-4 h-screen w-screen bg-gray-100">
      <div className="justify-self-end bg-blue-500 h-16 w-16"></div>
      <div className="justify-self-end bg-green-500 h-16 w-16"></div>
      <div className="justify-self-end bg-red-500 h-16 w-16"></div>
    </div>
  );
}

Justify Self Stretch

The stretch value makes the grid item expand to fill the entire width of its container.

This is a live editor. Play around with it!
export default function JustifyStretch() {
  return (
    <div className="grid grid-cols-3 gap-4 h-screen w-screen bg-gray-100">
      <div className="justify-self-stretch bg-blue-500 h-16"></div>
      <div className="justify-self-stretch bg-green-500 h-16"></div>
      <div className="justify-self-stretch bg-red-500 h-16"></div>
    </div>
  );
}

States and Responsiveness

Tailwind CSS allows developers to apply responsive and state-based customizations effortlessly. This enables you to modify alignment on hover, focus, or different screen sizes.

Hover and Focus States

You can modify justify-self properties dynamically for hover or focus states. Just use the hover: or focus: variants. In the below example, focus on the individual boxes to change their justify-self properties:

This is a live editor. Play around with it!
export default function HoverFocusExample() {
  return (
    <>
      <p className="text-center py-10">Click on a box below to align it to the end</p>
      <div className="grid grid-cols-3 gap-4 h-screen w-screen justify-items-center">
        <div tabindex="0" className="focus:justify-self-end bg-blue-500 h-16 w-16"></div>
        <div tabindex="1" className="focus:justify-self-end bg-green-500 h-16 w-16"></div>
        <div tabindex="2" className="focus:justify-self-end bg-red-500 h-16 w-16"></div>
      </div>
    </>
  );
}

Breakpoint Modifiers

Responsive breakpoints like sm, md, lg, and xl allow you to align items differently based on screen size. In this case, the item starts aligned at the sm breakpoint, and ends aligned at the lg breakpoint.

This is a live editor. Play around with it!
export default function ResponsiveBreakpoints() {
  return (
    <div className="grid grid-cols-3 gap-4 h-screen w-screen bg-gray-100">
      <div className="sm:justify-self-start lg:justify-self-end bg-blue-500 h-16"></div>
      <div className="sm:justify-self-start lg:justify-self-end bg-green-500 h-16"></div>
      <div className="sm:justify-self-start lg:justify-self-end bg-red-500 h-16"></div>
    </div>
  );
}

Real World Examples

Product Features Grid Layout

A responsive grid showcasing product features with alternating justify-self positioning for visual interest.

This is a live editor. Play around with it!
export default function ProductFeatures() {
  const features = [
    {
      title: "Cloud Storage",
      description: "Secure and scalable storage solution",
      icon: "https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a",
      alt: "Cloud storage icon"
    },
    {
      title: "Analytics Dashboard",
      description: "Real-time data visualization",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics icon"
    },
    {
      title: "Team Collaboration",
      description: "Seamless team communication tools",
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team icon"
    },
    {
      title: "API Integration",
      description: "Connect with third-party services",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "API icon"
    },
    {
      title: "Security Features",
      description: "Enterprise-grade protection",
      icon: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb",
      alt: "Security icon"
    },
    {
      title: "24/7 Support",
      description: "Round-the-clock customer service",
      icon: "https://images.unsplash.com/photo-1534536281715-e28d76689b4d",
      alt: "Support icon"
    }
  ];

  return (
    <div className="grid grid-cols-1 gap-6 p-8">
      {features.map((feature, index) => (
        <div
          key={feature.title}
          className={`justify-self-${index % 2 === 0 ? 'start' : 'end'} p-4 bg-white rounded-lg shadow-md`}
        >
          <img
            src={feature.icon}
            alt={feature.alt}
            className="w-16 h-16 mb-4 rounded-full"
          />
          <h3 className="text-xl font-bold">{feature.title}</h3>
          <p className="text-gray-600">{feature.description}</p>
        </div>
      ))}
    </div>
  );
}

Social Media Profile Cards

A social media profile display with justified self-positioning for profile cards.

This is a live editor. Play around with it!
export default function SocialProfiles() {
  const profiles = [
    {
      name: "Emma Wilson",
      role: "UX Designer",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Emma Wilson profile picture",
      followers: "12.5k",
      posts: "234"
    },
    {
      name: "James Rodriguez",
      role: "Developer",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Rodriguez profile picture",
      followers: "8.9k",
      posts: "156"
    },
    {
      name: "Sarah Chen",
      role: "Product Manager",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Sarah Chen profile picture",
      followers: "15.2k",
      posts: "342"
    },
    {
      name: "Michael Brown",
      role: "Content Creator",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Brown profile picture",
      followers: "20.1k",
      posts: "567"
    },
    {
      name: "Lisa Thompson",
      role: "Marketing Lead",
      avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Thompson profile picture",
      followers: "9.8k",
      posts: "189"
    },
    {
      name: "David Kim",
      role: "Data Scientist",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "David Kim profile picture",
      followers: "11.3k",
      posts: "245"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-8 p-6">
      {profiles.map((profile, index) => (
        <div
          key={profile.name}
          className={`justify-self-${
            index % 3 === 0 ? 'start' : index % 3 === 1 ? 'center' : 'end'
          } bg-white rounded-xl shadow-lg p-6 w-64`}
        >
          <img
            src={profile.avatar}
            alt={profile.alt}
            className="w-24 h-24 rounded-full mx-auto mb-4"
          />
          <h3 className="text-xl font-bold text-center">{profile.name}</h3>
          <p className="text-gray-500 text-center">{profile.role}</p>
          <div className="flex justify-between mt-4">
            <div className="text-center">
              <p className="font-bold">{profile.followers}</p>
              <p className="text-sm text-gray-500">Followers</p>
            </div>
            <div className="text-center">
              <p className="font-bold">{profile.posts}</p>
              <p className="text-sm text-gray-500">Posts</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Achievement Badges Display

A showcase of achievement badges with dynamic justify-self positioning.

This is a live editor. Play around with it!
export default function AchievementBadges() {
  const achievements = [
    {
      title: "Master Coder",
      level: "Diamond",
      icon: "https://images.unsplash.com/photo-1614027164847-1b28cfe1df60",
      alt: "Diamond badge icon",
      points: "10,000"
    },
    {
      title: "Bug Hunter",
      level: "Platinum",
      icon: "https://images.unsplash.com/photo-1546776310-eef45dd6d63c",
      alt: "Bug hunter badge icon",
      points: "8,500"
    },
    {
      title: "Team Player",
      level: "Gold",
      icon: "https://images.unsplash.com/photo-1533227268428-f9ed0900fb3b",
      alt: "Team player badge icon",
      points: "7,200"
    },
    {
      title: "Innovation Guru",
      level: "Silver",
      icon: "https://images.unsplash.com/photo-1542744173-8e7e53415bb0",
      alt: "Innovation badge icon",
      points: "6,800"
    },
    {
      title: "Speed Demon",
      level: "Bronze",
      icon: "https://images.unsplash.com/photo-1531747118685-ca8fa6e08806",
      alt: "Speed badge icon",
      points: "5,400"
    },
    {
      title: "Problem Solver",
      level: "Elite",
      icon: "https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5",
      alt: "Problem solver badge icon",
      points: "4,900"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8 bg-gray-100">
      {achievements.map((achievement, index) => (
        <div
          key={achievement.title}
          className={`justify-self-${
            index % 2 === 0 ? 'start' : 'end'
          } transform hover:scale-105 transition-transform duration-300`}
        >
          <div className="bg-gradient-to-br from-purple-500 to-blue-600 p-6 rounded-lg text-white">
            <img
              src={achievement.icon}
              alt={achievement.alt}
              className="w-20 h-20 mx-auto mb-4 rounded-full border-4 border-white"
            />
            <h3 className="text-xl font-bold text-center mb-2">
              {achievement.title}
            </h3>
            <div className="text-center">
              <span className="bg-white/20 px-3 py-1 rounded-full text-sm">
                {achievement.level}
              </span>
            </div>
            <p className="text-center mt-3">{achievement.points} pts</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Product Feature Grid Layout

A grid for product features where each item is justified differently on hover.

This is a live editor. Play around with it!
export default function FeatureGrid() {
  const features = [
    {
      title: "Team Collaboration",
      description: "Work together seamlessly",
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team icon"
    },
    {
      title: "Advanced Security",
      description: "Enterprise-grade protection",
      icon: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb",
      alt: "Security icon"
    },
    {
      title: "Analytics Dashboard",
      description: "Comprehensive data insights",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics icon"
    },
  ];

  return (
    <div className="grid grid-cols-1 gap-6 p-8">
      {features.map((feature, index) => (
        <div key={index} className="justify-self-center hover:justify-self-start cursor-pointer transition-all duration-300">
          <img src={feature.icon} alt={feature.alt} className="w-16 h-16 rounded-full mb-4" />
          <h3 className="text-xl font-bold">{feature.title}</h3>
          <p className="text-gray-600">{feature.description}</p>
        </div>
      ))}
    </div>
  );
}

Project Timeline Cards

A vertical timeline display with alternating justify-self positioning for project milestones.

This is a live editor. Play around with it!
export default function ProjectTimeline() {
  const milestones = [
    {
      title: "Project Kickoff",
      date: "Jan 2024",
      description: "Initial planning and team formation phase",
      icon: "https://images.unsplash.com/photo-1535572290543-960a8046f5af",
      alt: "Project kickoff icon",
      status: "Completed"
    },
    {
      title: "Design Phase",
      date: "Feb 2024",
      description: "UI/UX design and prototyping",
      icon: "https://images.unsplash.com/photo-1561070791-2526d30994b5",
      alt: "Design phase icon",
      status: "In Progress"
    },
    {
      title: "Development Sprint",
      date: "Mar 2024",
      description: "Core feature implementation",
      icon: "https://images.unsplash.com/photo-1531403009284-440f080d1e12",
      alt: "Development sprint icon",
      status: "Pending"
    },
    {
      title: "Testing Phase",
      date: "Apr 2024",
      description: "Quality assurance and bug fixing",
      icon: "https://images.unsplash.com/photo-1516321165247-4aa89a48be28",
      alt: "Testing phase icon",
      status: "Pending"
    },
    {
      title: "Beta Release",
      date: "May 2024",
      description: "Limited user testing and feedback",
      icon: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Beta release icon",
      status: "Pending"
    },
    {
      title: "Production Launch",
      date: "Jun 2024",
      description: "Official release and monitoring",
      icon: "https://images.unsplash.com/photo-1534670007418-fbb7f6cf32c3",
      alt: "Launch icon",
      status: "Pending"
    }
  ];

  return (
    <div className="relative max-w-4xl mx-auto p-8">
      <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-200"></div>
      {milestones.map((milestone, index) => (
        <div
          key={milestone.title}
          className={`relative mb-12 ${
            index % 2 === 0 ? 'justify-self-start' : 'justify-self-end'
          }`}
        >
          <div
            className={`flex items-center ${
              index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'
            }`}
          >
            <div
              className={`w-96 bg-white p-6 rounded-lg shadow-lg ${
                index % 2 === 0 ? 'mr-8' : 'ml-8'
              }`}
            >
              <div className="flex items-center justify-between mb-4">
                <h3 className="text-xl font-bold">{milestone.title}</h3>
                <span className={`px-3 py-1 rounded-full text-sm ${
                  milestone.status === 'Completed' 
                    ? 'bg-green-100 text-green-800'
                    : milestone.status === 'In Progress'
                    ? 'bg-blue-100 text-blue-800'
                    : 'bg-gray-100 text-gray-800'
                }`}>
                  {milestone.status}
                </span>
              </div>
              <p className="text-gray-600 mb-2">{milestone.description}</p>
              <p className="text-sm text-gray-500">{milestone.date}</p>
            </div>
            <div className="w-12 h-12 bg-white rounded-full border-4 border-blue-500 flex items-center justify-center z-10">
              <img
                src={milestone.icon}
                alt={milestone.alt}
                className="w-6 h-6 rounded"
              />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Best Practices

Maintain Design Consistency

When applying justify-self utilities in Tailwind CSS, prioritizing design consistency across your project is essential. Align components uniformly within a grid layout to create a structured and professional look.

For instance, using justify-self-center for key focal items, such as product headings or call-to-action buttons, ensures a predictable and aesthetically pleasing layout. Avoid mixing different alignment utilities within the same logical grouping of elements.

Balance with Other Layout Properties

When working with justify-self, combine it thoughtfully with properties like gap, grid-template-columns, and align-self to create a complete layout solution.

For example, integrating justify-self-stretch with generous gap settings allows content to visually fill grid spaces without appearing crowded. This technique is especially useful for section-based UI designs like dashboards.

A holistic approach to layout design enhances the efficiency and functionality of grid systems.

Debugging Common Issues

Resolve Common Problems

Certain alignment issues, such as unintended overflow or misaligned grid items, arise when combining justify-self with larger grid systems. To avoid these situations, ensure grid templates (grid-template-columns) allocate sufficient space for aligned content, and gap aligns proportionately with utility usage like justify-self-end.

If unexpected behavior arises due to missing fallback properties or overrides from parent classes, debugging alignment at both the container and item levels is critical to isolate inconsistencies.

Iterative Testing and Maintenance

When debugging grid layouts involving justify-self, iterate through your changes incrementally rather than applying bulk updates. Validate each alignment behavior change at multiple breakpoints.

This strategy helps you pinpoint the exact cause of unexpected behavior and prevents compounding errors that can emerge when too many CSS modifications are introduced all at once. For example, if you switch from justify-self-start to justify-self-center on a particular grid item, verify that the alignment holds not only in a desktop view but also at tablet and mobile breakpoints.

By testing each minor update in isolation, you’ll save yourself from having to sift through a multitude of changes to identify where a misalignment originated.