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.
Class | Properties | Example |
---|---|---|
justify-self-auto | justify-self: auto; | <div className="justify-self-auto"></div> |
justify-self-start | justify-self: start; | <div className="justify-self-start"></div> |
justify-self-end | justify-self: end; | <div className="justify-self-end"></div> |
justify-self-center | justify-self: center; | <div className="justify-self-center"></div> |
justify-self-stretch | justify-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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.