Tailwind CSS Justify Items

Justify Items is used in grid layouts to control the alignment of grid items along the row axis. It determines how items behave within their assigned grid cells, enabling developers to align them to the start, center, end, or stretch them across the available space.

Tailwind CSS provides you with a streamlined utility-based implementation of this property. With its concise class names, you can effectively control item alignment in grid layouts without managing verbose CSS.

Class	Properties	Example
`justify-items-start`	`justify-items: start;`	`<div className="justify-items-start"></div>`
`justify-items-end`	`justify-items: end;`	`<div className="justify-items-end"></div>`
`justify-items-center`	`justify-items: center;`	`<div className="justify-items-center"></div>`
`justify-items-stretch`	`justify-items: stretch;`	`<div className="justify-items-stretch"></div>`

Overview of Justify Items

Tailwind provides predefined behaviors like starting, centering, ending, or stretching items to align items.

Justify to the Start

If you aim to place all grid items at the beginning of their cells, Tailwind’s class justify-items-start ensures they are aligned neatly to the start. Consider the demo below:

This is a live editor. Play around with it!

export default function StartAlignment() {
  return (
    <div className="grid justify-items-start h-screen w-screen bg-gray-100 gap-4">
      {/* Justify-items start */}
      <img
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Nature"
        className="w-40 h-40 object-cover border border-gray-300"
      />
      <div className="w-40 h-40 bg-blue-200 flex items-center justify-center">
        <p className="text-xs">Aligned to Start</p>
      </div>
    </div>
  );
}

Explanation:

justify-items-start ensures that items align to the very start of their grid cells.
Useful in layouts for creating alignment that aligns with titles or logos.

Justify to the End

To anchor items to the end of their cells for precise positioning, use the justify-items-end class. This is particularly handy when dealing with button placements or specific bottom-aligned content.

This is a live editor. Play around with it!

export default function EndAlignment() {
  return (
    <div className="grid justify-items-end h-screen w-screen bg-gray-100 gap-4">
      {/* Justify-items end */}
      <div className="w-40 h-40 bg-green-200 flex items-center justify-center">
        <p className="text-xs">Aligned to End</p>
      </div>
      <img
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Nature"
        className="w-40 h-40 object-cover border border-gray-300"
      />
    </div>
  );
}

Explanation:

With justify-items-end, items are consistently nudged to the far right.
A great alignment choice for emphasizing visually segregated elements.

Justify to the Center

When you need items to sit perfectly centered, Tailwind’s justify-items-center ensures items are centrally aligned:

This is a live editor. Play around with it!

export default function CenterAlignment() {
  return (
    <div className="grid justify-items-center h-screen w-screen bg-gray-100 gap-4">
      {/* Justify-items center */}
      <img
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Nature"
        className="w-40 h-40 object-cover border border-gray-300"
      />
      <div className="w-40 h-40 bg-red-200 flex items-center justify-center">
        <p className="text-xs">Centered Item</p>
      </div>
    </div>
  );
}

Explanation:

justify-items-center ensures that items align to the center.
Perfect for engaging visual layouts requiring center emphasis.

Stretching the Items

For scenarios where grid items should span the entire width or height, justify-items-stretch becomes invaluable in Tailwind.

This is a live editor. Play around with it!

export default function StretchAlignment() {
  return (
    <div className="grid justify-items-stretch h-screen w-screen bg-gray-100 gap-4">
      {/* Justify-items stretch */}
      <img
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac"
        alt="Nature"
        className="w-full h-40 object-cover border border-gray-300"
      />
      <div className="bg-purple-200 h-full w-full flex items-center justify-center">
        <p className="text-xs px-4">Stretched Grid Item</p>
      </div>
    </div>
  );
}

Explanation:

With justify-items-stretch, items fill up their grid spaces, ensuring visual balance.
Ideal for scaling dynamic layouts requiring proportional resizing.

States and Responsiveness

Hover and Focus States

In modern web apps, user interactions often change an element's alignment dynamically. Tailwind supports such behaviors with state-dependent utilities.

This is a live editor. Play around with it!

export default function HoverStateAlignment() {
  return (
    <div className="grid justify-items-start hover:justify-items-end h-screen w-screen bg-gray-100 gap-4">
      {/* Hover adjustment */}
      <div className="w-40 h-40 bg-gray-200 flex items-center justify-center transition-all duration-300">
        <p className="text-xs">Hover to Align Right</p>
      </div>
    </div>
  );
}

Explanation:

Using hover:justify-items-end, items react interactively as users hover.
State-based behavior like focus, active, or hover creates engaging responsive UIs.

Breakpoint Modifiers

Achieving device-specific alignment without additional CSS is seamless in Tailwind. Add conditionals like md:justify-items-start or lg:justify-items-center.

This is a live editor. Play around with it!

export default function ResponsiveAlignment() {
  return (
    <div className="grid justify-items-start sm:justify-items-center lg:justify-items-end h-screen w-screen bg-gray-100 gap-4">

      <div className="w-44 h-48 bg-gray-200 flex items-center justify-center transition-all duration-300">
        <p className="text-sm px-4">This box will be justified to the start, by default. On sm and above, it will be at the center. And on lg and above, it will be justified to the end.</p>
      </div>
    </div>
  );
}

Explanation:

Utilizing breakpoints like md: or lg:, alignments adapt dynamically for varying device widths.
Implements mobile-first designs elegantly.

Real World Examples

Feature Comparison Grid

This example displays a feature comparison grid with justified items for better readability.

This is a live editor. Play around with it!

export default function FeatureComparison() {
  const features = [
    {
      id: 1,
      name: "Cloud Storage",
      basic: true,
      pro: true,
      enterprise: true,
      icon: "https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a",
      alt: "Cloud storage icon"
    },
    {
      id: 2,
      name: "Team Collaboration",
      basic: false,
      pro: true,
      enterprise: true,
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team collaboration icon"
    },
    {
      id: 3,
      name: "Advanced Analytics",
      basic: false,
      pro: false,
      enterprise: true,
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics icon"
    },
    {
      id: 4,
      name: "24/7 Support",
      basic: false,
      pro: true,
      enterprise: true,
      icon: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d",
      alt: "Support icon"
    },
    {
      id: 5,
      name: "Custom Integration",
      basic: false,
      pro: false,
      enterprise: true,
      icon: "https://images.unsplash.com/photo-1512758017271-d7b84c2113f1",
      alt: "Integration icon"
    },
    {
      id: 6,
      name: "API Access",
      basic: false,
      pro: true,
      enterprise: true,
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "API icon"
    }
  ];

  return (
    <div className="container mx-auto p-8">
      <div className="grid grid-cols-4 justify-items-center gap-4 bg-white rounded-lg shadow-lg p-6">
        <div className="font-bold">Feature</div>
        <div className="font-bold">Basic</div>
        <div className="font-bold">Pro</div>
        <div className="font-bold">Enterprise</div>
        
        {features.map((feature) => (
          <>
            <div key={feature.id} className="flex items-center gap-2">
              <img
                src={feature.icon}
                alt={feature.alt}
                className="w-6 h-6 rounded object-cover"
              />
              {feature.name}
            </div>
            <div>{feature.basic ? "✓" : "✕"}</div>
            <div>{feature.pro ? "✓" : "✕"}</div>
            <div>{feature.enterprise ? "✓" : "✕"}</div>
          </>
        ))}
      </div>
    </div>
  );
}

Event Schedule Timeline

This example shows an event schedule with justified items in a timeline layout.

This is a live editor. Play around with it!

export default function EventSchedule() {
  const events = [
    {
      id: 1,
      time: "9:00 AM",
      title: "Opening Keynote",
      speaker: "John Smith",
      location: "Main Hall",
      src: "https://images.unsplash.com/photo-1475721027785-f74eccf877e2",
      alt: "Conference hall"
    },
    {
      id: 2,
      time: "10:30 AM",
      title: "Future of AI",
      speaker: "Dr. Maria Garcia",
      location: "Room A",
      src: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e",
      alt: "AI presentation"
    },
    {
      id: 3,
      time: "12:00 PM",
      title: "Networking Lunch",
      speaker: "",
      location: "Dining Area",
      src: "https://images.unsplash.com/photo-1505373877841-8d25f7d46678",
      alt: "Networking event"
    },
    {
      id: 4,
      time: "1:30 PM",
      title: "Web3 Workshop",
      speaker: "Alex Johnson",
      location: "Room B",
      src: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "Workshop session"
    },
    {
      id: 5,
      time: "3:00 PM",
      title: "Panel Discussion",
      speaker: "Industry Leaders",
      location: "Main Hall",
      src: "https://images.unsplash.com/photo-1475721027785-f74eccf877e2",
      alt: "Panel discussion"
    },
    {
      id: 6,
      time: "4:30 PM",
      title: "Closing Remarks",
      speaker: "Conference Chair",
      location: "Main Hall",
      src: "https://images.unsplash.com/photo-1475721027785-f74eccf877e2",
      alt: "Closing ceremony"
    }
  ];

  return (
    <div className="container mx-auto p-8">
      <div className="grid grid-cols-1 justify-items-stretch gap-6">
        {events.map((event) => (
          <div key={event.id} className="flex items-center bg-white rounded-lg shadow-md overflow-hidden">
            <div className="w-32 bg-blue-600 text-white p-4 flex flex-col justify-center items-center">
              <span className="text-lg font-bold">{event.time}</span>
            </div>
            <div className="flex-1 p-4">
              <h3 className="text-xl font-bold">{event.title}</h3>
              {event.speaker && <p className="text-gray-600">Speaker: {event.speaker}</p>}
              <p className="text-gray-500">{event.location}</p>
            </div>
            <div className="w-32 h-32">
              <img
                src={event.src}
                alt={event.alt}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Dashboard Widgets

A dashboard layout where widgets are positioned using different justify-self values.

This is a live editor. Play around with it!

export default function DashboardGrid() {
  const widgets = [
    {
      id: 1,
      title: "Revenue",
      value: "$24,500",
      icon: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e",
      type: "primary"
    },
    {
      id: 2,
      title: "Users",
      value: "1,234",
      icon: "https://images.unsplash.com/photo-1633332755192-727a05c4013d",
      type: "secondary"
    },
    // ... 4 more widgets
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 p-6 bg-gray-100">
      {widgets.map(widget => (
        <div
          key={widget.id}
          className={`p-4 rounded-lg bg-white shadow ${
            widget.type === 'primary'
              ? 'justify-self-end'
              : 'justify-self-start'
          }`}
        >
          <img
            src={widget.icon}
            alt={widget.title}
            className="w-8 h-8 mb-2"
          />
          <h3 className="text-gray-600">{widget.title}</h3>
          <p className="text-2xl font-bold">{widget.value}</p>
        </div>
      ))}
    </div>
  );
}

Feature Comparison Cards

A comparison grid where premium features are positioned differently using justify-self.

This is a live editor. Play around with it!

export default function FeatureComparison() {
  const features = [
    {
      id: 1,
      name: "Basic Plan",
      price: "$9.99",
      isPremium: false,
      benefits: ["5GB Storage", "Basic Support", "1 User"],
      icon: "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a",
      alt: "Basic plan icon"
    },
    {
      id: 2,
      name: "Premium Plan",
      price: "$29.99",
      isPremium: true,
      benefits: ["50GB Storage", "24/7 Support", "5 Users"],
      icon: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Premium plan icon"
    },
    // ... 4 more plans
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
      {features.map(feature => (
        <div
          key={feature.id}
          className={`p-6 rounded-xl border ${
            feature.isPremium
              ? 'justify-self-center scale-105 shadow-lg'
              : 'justify-self-stretch'
          }`}
        >
          <img
            src={feature.icon}
            alt={feature.alt}
            className="w-12 h-12 mb-4"
          />
          <h3 className="text-xl font-bold">{feature.name}</h3>
          <p className="text-2xl font-bold my-4">{feature.price}</p>
          <ul className="space-y-2">
            {feature.benefits.map((benefit, index) => (
              <li key={index} className="flex items-center">
                <span className="mr-2">✓</span>
                {benefit}
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Product Comparison Cards

This example shows a grid of product comparison cards where each card is justified differently for visual hierarchy.

This is a live editor. Play around with it!

export default function ProductComparison() {
  const products = [
    {
      name: "Premium Laptop",
      price: "$1299",
      rating: "4.8",
      image: "https://images.unsplash.com/photo-1541807084-5c52b6b3adef",
      features: ["16GB RAM", "512GB SSD", "4K Display"]
    },
    {
      name: "Budget Laptop",
      price: "$699",
      rating: "4.2",
      image: "https://images.unsplash.com/photo-1593642702749-b7d2a804fbcf",
      features: ["8GB RAM", "256GB SSD", "HD Display"]
    },
    {
      name: "Gaming Laptop",
      price: "$1899",
      rating: "4.9",
      image: "https://images.unsplash.com/photo-1603302576837-37561b2e2302",
      features: ["32GB RAM", "1TB SSD", "RTX 4080"]
    },
    {
      name: "Ultrabook",
      price: "$1499",
      rating: "4.7",
      image: "https://images.unsplash.com/photo-1588872657578-7efd1f1555ed",
      features: ["16GB RAM", "512GB SSD", "Touch Screen"]
    },
    {
      name: "Business Laptop",
      price: "$1199",
      rating: "4.5",
      image: "https://images.unsplash.com/photo-1602080858428-57174f9431cf",
      features: ["16GB RAM", "1TB HDD", "Fingerprint Reader"]
    },
    {
      name: "Student Laptop",
      price: "$599",
      rating: "4.3",
      image: "https://images.unsplash.com/photo-1588702547919-26089e690ecc",
      features: ["8GB RAM", "128GB SSD", "Lightweight"]
    }
  ];

  return (
    <div className="grid grid-cols-1 gap-6 p-8">
      {products.map((product) => (
        <div key={product.name} className="grid justify-items-start bg-white rounded-xl shadow-lg gap-2 p-6">
          <img 
            src={product.image} 
            alt={product.name}
            className="w-full h-48 object-cover rounded-lg"
          />
          <h3 className="text-xl font-bold mt-4">{product.name}</h3>
          <p className="text-green-600 font-bold">{product.price}</p>
          <div className="mt-2">
            <span className="bg-yellow-100 px-2 py-1 rounded">⭐ {product.rating}</span>
          </div>
          <ul className="mt-4">
            {product.features.map((feature) => (
              <li key={feature} className="text-gray-600">✓ {feature}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Best Practices

Maintain Design Consistency

When you use Tailwind CSS, it's crucial to ensure that your justify-items classes are applied in a consistent manner across your project. By doing so, your layout will appear cohesive and polished for the end user. For instance, if you design a grid-based interface for a dashboard, aligning related elements (such as icons, text, and buttons) uniformly creates a professional appearance. You should rely on utility classes like justify-items-center or justify-items-start consistently for these sections instead of deviating for individual cases.

Leverage Utility Combinations

Combining justify-items utilities with complementary alignment properties, such as align-items or place-items, enables you to achieve more intricate and polished layouts. For example, aligning child elements both horizontally and vertically can be accomplished by pairing justify-items-center with items-center. This is particularly useful for designing centrally focused elements like cards.

Additionally, you should explore how gap-* and auto-rows-* utilities complement justify-items classes to create cleanly spaced grids. Proper spacing not only improves readability but also lends a structured aesthetic to your user interfaces. Using combinations thoughtfully gives you control over intricate designs without resorting to verbose custom CSS.

Accessibility Considerations

Enhance Readability and Navigability

Effective use of justify-items improves both readability and content navigability, especially for users relying on assistive technologies. Proper alignment of content, such as justify-items-center for call-to-action elements or justify-items-stretch for full-width banners, ensures logical flow and ease of interaction. This structure benefits screen readers as well, enabling sequential navigation through correctly placed elements.

Additionally, combining utilities like justify-items with proper semantic HTML (e.g., <main>, <section>, <nav>) further enhances accessibility. For example, use justify-items-start in a navigation menu to ensure items are laid out predictably for users navigating via the keyboard. These alignment decisions directly impact how accessible and navigable your interface feels to various users.

Ensure Keyboard Accessibility

Keyboard navigation remains a fundamental aspect of web accessibility, and the correct use of justify-items can significantly enhance this experience. For example, you can use justify-items-start alongside a well-defined tab order to ensure consistent focus flow. This helps users relying on the keyboard clearly assess and interact with your site.

Aligning content predictably using justify-items and grid-* ensures that key interactive components, such as form fields or buttons, are accessible without forcing users to scroll unnecessarily. By maintaining consistent alignment, you minimize confusion when navigating horizontally or vertically across a grid layout.

Introduce focus indicators to accompany alignment utilities. Paired with justify-items, these enhancements create a more seamless navigation flow, especially in dense or multifaceted grid-based designs.

Justify Content Justify Self