Tailwind CSS Place Items

The place-items property in CSS is a shorthand for align-items, and justify-items used to align items along both the block axis and the inline axis within a container, primarily in grid layouts. When place-items is used on a flexbox layout, the justify-items property is ignored as it's used on grids.

Tailwind provides a bunch of utility classes to simplify working with with place-items In this guide, we will learn to use these utilities in Tailwind CSS:

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

Overview of Place Items

Aligned at the Start

The place-items-start utility aligns the items at the start of both axes of the container. This is perfect for scenarios where you want content to flow naturally to the top-left of its enclosing space.

This is a live editor. Play around with it!

export default function PlaceItemsStart() {
  return (
    <div className="w-screen h-screen bg-gray-100 grid place-items-start">
      {/* Items are aligned at the start */}
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Aligned Item"
        className="w-32 h-32 rounded-md shadow-md"
      />
    </div>
  );
}

Above, by using place-items-start, the image stays anchored to the start of the container.

Aligned to the End

When you need content to anchor itself to the bottom-right corner of the container, Tailwind's place-items-end is the appropriate choice. It's useful for creating balanced layouts with content distributed towards a specific edge.

This is a live editor. Play around with it!

export default function PlaceItemsEnd() {
  return (
    <div className="w-screen h-screen bg-gray-100 grid place-items-end">
      {/* Items are aligned at the end */}
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Aligned Item"
        className="w-32 h-32 rounded-md shadow-md"
      />
    </div>
  );
}

In this snippet, the place-items-end utility shapes alignment equally to the container boundaries' end along both axes.

Aligned at the Center

For centering elements both vertically and horizontally, place-items-center offers the most straightforward solution in Tailwind. This is ideal for creating visually balanced layouts.

This is a live editor. Play around with it!

export default function PlaceItemsCenter() {
  return (
    <div className="w-screen h-screen bg-gray-300 grid place-items-center">
      {/* Items are perfectly centered */}
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Centered Item"
        className="w-40 h-40 rounded-md shadow-lg border-2 border-white"
      />
    </div>
  );
}

The content above appears centrally aligned, regardless of the viewport dimensions.

Stretch Alignment

When you need content to span the entire container, place-items-stretch is the ideal utility. Stretch alignment works well for creating uniform layouts, especially in grids with repeating patterns.

This is a live editor. Play around with it!

export default function PlaceItemsStretch() {
  return (
    <div className="w-screen h-screen bg-gray-400 grid place-items-stretch">
      {/* Items are stretched across the container */}
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Stretched Item"
        className="w-full h-full object-cover border shadow-md"
      />
    </div>
  );
}

With place-items-stretch, the child element scales with the parent container.

States and Responsiveness

Tailwind supports condition-based alignment utilities. The classes implement alignment changes when a state—such as hover, focus, or active—is triggered. Tailwind also has modifiers sm, md, lg, etc. to target various breakpoints. Let’s explore how you can achieve this.

Hover and Focus States

Change item alignment when an element is hovered. Tailwind's hover:place-items-* syntax allows dynamic and engaging user interfaces.

This is a live editor. Play around with it!

export default function HoverAlignment() {
  return (
    <div className="w-screen h-screen grid hover:place-items-end place-items-center bg-gray-100">
      {/* Alignment shifts to the end when hovered */}
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Hover Effect"
        className="w-28 h-28 rounded-lg"
      />
    </div>
  );
}

Here, items move from center to end alignment when hovered.

Breakpoint Modifiers

Tailwind’s breakpoints let you modify alignment properties across varying screen sizes. This is particularly useful for responsive design in complex layouts.

This is a live editor. Play around with it!

export default function ResponsiveAlignment() {
  return (
    <div className="w-screen h-screen bg-gray-200 grid place-items-center sm:place-items-start md:place-items-end lg:place-items-stretch">
      {/* Alignment adjusts based on screen size */}
      <img
        src="https://images.unsplash.com/photo-1508873699372-7aeab60b44ab"
        alt="Responsive Placement"
        className="w-44 h-44 rounded-xl border-4 border-white shadow-xl"
      />
    </div>
  );
}

This demonstrates how layout adjustments for place-items dynamically occur across varying breakpoints.

Real World Examples

Product Showcase Grid

This example demonstrates a grid layout for featuring premium products with place-items-start.

This is a live editor. Play around with it!

export default function PremiumProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Watch",
      price: "$299",
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Luxury watch on display"
    },
    {
      id: 2,
      name: "Designer Sunglasses",
      price: "$199",
      src: "https://images.unsplash.com/photo-1572635196237-14b3f281503f",
      alt: "Elegant sunglasses"
    },
    {
      id: 3,
      name: "Leather Wallet",
      price: "$89",
      src: "https://images.unsplash.com/photo-1627123424574-724758594e93",
      alt: "Brown leather wallet"
    },
    {
      id: 4,
      name: "Silver Necklace",
      price: "$159",
      src: "https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f",
      alt: "Silver chain necklace"
    },
    {
      id: 5,
      name: "Premium Headphones",
      price: "$249",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Wireless headphones"
    },
    {
      id: 6,
      name: "Smart Watch",
      price: "$399",
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Modern smartwatch"
    }
  ];

  return (
    <div className="grid gap-6 p-8 bg-gray-100">
      {products.map((product) => (
        <div key={product.id} className="grid place-items-start bg-white p-6 rounded-lg shadow-md">
          <img 
            src={product.src} 
            alt={product.alt}
            className="w-48 h-48 object-cover rounded-md"
          />
          <h3 className="text-xl font-bold mt-4">{product.name}</h3>
          <p className="text-blue-600 text-lg">{product.price}</p>
        </div>
      ))}
    </div>
  );
}

Team Member Directory

This example shows team members' contact information with place-items-end.

This is a live editor. Play around with it!

export default function TeamDirectory() {
  const teamMembers = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile photo",
      email: "sarah@company.com"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Michael Chen profile photo",
      email: "michael@company.com"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Design Lead",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Emma Williams profile photo",
      email: "emma@company.com"
    },
    {
      id: 4,
      name: "James Wilson",
      role: "Developer",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "James Wilson profile photo",
      email: "james@company.com"
    },
    {
      id: 5,
      name: "Lisa Garcia",
      role: "Marketing",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Lisa Garcia profile photo",
      email: "lisa@company.com"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "David Kim profile photo",
      email: "david@company.com"
    }
  ];

  return (
    <div className="bg-gray-50 p-10">
      <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-8">
        {teamMembers.map((member) => (
          <div key={member.id} className="grid place-items-end bg-white p-6 rounded-xl shadow-sm">
            <img 
              src={member.src} 
              alt={member.alt}
              className="w-24 h-24 rounded-full object-cover"
            />
            <h3 className="text-xl font-semibold mt-4">{member.name}</h3>
            <p className="text-gray-600">{member.role}</p>
            <p className="text-blue-500 text-sm">{member.email}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Feature Showcase

This example displays feature cards with centered icons using place-items-center.

This is a live editor. Play around with it!

export default function FeatureShowcase() {
  const features = [
    {
      id: 1,
      title: "Cloud Storage",
      description: "Secure cloud storage for all your files",
      icon: "https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a",
      alt: "Cloud storage icon"
    },
    {
      id: 2,
      title: "Fast Sync",
      description: "Quick synchronization across devices",
      icon: "https://images.unsplash.com/photo-1585776245991-cf89dd7fc73a",
      alt: "Sync icon"
    },
    {
      id: 3,
      title: "Security",
      description: "Enterprise-grade security features",
      icon: "https://images.unsplash.com/photo-1633265486064-086b219458ec",
      alt: "Security icon"
    },
    {
      id: 4,
      title: "Analytics",
      description: "Detailed usage analytics and reports",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics icon"
    },
    {
      id: 5,
      title: "Collaboration",
      description: "Real-time collaboration tools",
      icon: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca",
      alt: "Collaboration icon"
    },
    {
      id: 6,
      title: "Integration",
      description: "Seamless third-party integrations",
      icon: "https://images.unsplash.com/photo-1573164713988-8665fc963095",
      alt: "Integration icon"
    }
  ];

  return (
    <div className="bg-indigo-50 p-12">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {features.map((feature) => (
          <div key={feature.id} className="grid place-items-center bg-white p-8 rounded-2xl shadow-lg">
            <div className="w-16 h-16 rounded-full bg-indigo-100 grid place-items-center">
              <img 
                src={feature.icon} 
                alt={feature.alt}
                className="w-8 h-8"
              />
            </div>
            <h3 className="text-xl font-bold mt-4">{feature.title}</h3>
            <p className="text-gray-600 text-center mt-2">{feature.description}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Testimonial Grid

This example shows testimonials with centered content using place-items-center.

This is a live editor. Play around with it!

export default function TestimonialGrid() {
  const testimonials = [
    {
      id: 1,
      name: "John Doe",
      role: "CEO at TechCorp",
      quote: "This product has transformed our business operations completely.",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "John Doe profile photo"
    },
    {
      id: 2,
      name: "Emily Brown",
      role: "Designer at CreativeStudio",
      quote: "The best design tool I've ever used. Highly recommended!",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Brown profile photo"
    },
    {
      id: 3,
      name: "Mark Wilson",
      role: "Freelancer",
      quote: "Simple, effective, and exactly what I needed for my projects.",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Mark Wilson profile photo"
    },
    {
      id: 4,
      name: "Sarah Lee",
      role: "Marketing Manager",
      quote: "Outstanding support team and excellent features.",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Lee profile photo"
    },
    {
      id: 5,
      name: "David Chang",
      role: "Product Manager",
      quote: "The analytics features are incredibly insightful.",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "David Chang profile photo"
    },
    {
      id: 6,
      name: "Lisa Martinez",
      role: "Startup Founder",
      quote: "This platform helped us scale our business efficiently.",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Martinez profile photo"
    }
  ];

  return (
    <div className="bg-gradient-to-br from-purple-50 to-pink-50 p-10">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {testimonials.map((testimonial) => (
          <div key={testimonial.id} className="grid place-items-center bg-white p-8 rounded-xl shadow-sm">
            <img 
              src={testimonial.src} 
              alt={testimonial.alt}
              className="w-20 h-20 rounded-full object-cover mb-4"
            />
            <p className="text-gray-800 text-center italic">"{testimonial.quote}"</p>
            <h4 className="font-semibold mt-4">{testimonial.name}</h4>
            <p className="text-sm text-gray-600">{testimonial.role}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Pricing Cards

This example displays pricing plans with place-items-start.

This is a live editor. Play around with it!

export default function PricingCards() {
  const plans = [
    {
      id: 1,
      name: "Basic",
      price: "$9",
      period: "monthly",
      features: ["2 GB Storage", "10 Users", "Basic Support", "Email Access", "2 Projects", "API Access"],
      icon: "https://images.unsplash.com/photo-1605792657660-596af9009e82",
      alt: "Basic plan icon"
    },
    {
      id: 2,
      name: "Pro",
      price: "$29",
      period: "monthly",
      features: ["10 GB Storage", "50 Users", "Priority Support", "Email + Chat Access", "10 Projects", "Advanced API"],
      icon: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Pro plan icon"
    },
    {
      id: 3,
      name: "Enterprise",
      price: "$99",
      period: "monthly",
      features: ["100 GB Storage", "Unlimited Users", "24/7 Support", "Full Access", "Unlimited Projects", "Custom API"],
      icon: "https://images.unsplash.com/photo-1533750349088-cd871a92f312",
      alt: "Enterprise plan icon"
    },
    {
      id: 4,
      name: "Startup",
      price: "$49",
      period: "monthly",
      features: ["20 GB Storage", "100 Users", "Premium Support", "Full Platform Access", "20 Projects", "Developer API"],
      icon: "https://images.unsplash.com/photo-1559136555-9303baea8ebd",
      alt: "Startup plan icon"
    },
    {
      id: 5,
      name: "Team",
      price: "$79",
      period: "monthly",
      features: ["50 GB Storage", "200 Users", "Dedicated Support", "Complete Access", "50 Projects", "Team API"],
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team plan icon"
    },
    {
      id: 6,
      name: "Custom",
      price: "Contact",
      period: "flexible",
      features: ["Custom Storage", "Custom Users", "VIP Support", "Full Suite Access", "Custom Projects", "Enterprise API"],
      icon: "https://images.unsplash.com/photo-1551434678-e076c223a692",
      alt: "Custom plan icon"
    }
  ];

  return (
    <div className="bg-gray-100 p-12">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {plans.map((plan) => (
          <div key={plan.id} className="grid place-items-start bg-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow">
            <img 
              src={plan.icon} 
              alt={plan.alt}
              className="w-16 h-16 object-cover rounded-lg"
            />
            <h3 className="text-2xl font-bold mt-4">{plan.name}</h3>
            <div className="flex items-baseline mt-2">
              <span className="text-4xl font-bold">{plan.price}</span>
              <span className="text-gray-500 ml-1">/{plan.period}</span>
            </div>
            <ul className="mt-6 space-y-3">
              {plan.features.map((feature, index) => (
                <li key={index} className="flex items-center">
                  <svg className="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"/>
                  </svg>
                  {feature}
                </li>
              ))}
            </ul>
            <button className="mt-8 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition-colors">
              Choose Plan
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

Best Practices

Balance with Other Layout Properties

Tailwind CSS allows seamless integration of place-items alongside properties like gap, aspect-ratio, and object-fit. When designing media-heavy layouts or interactive elements, such combinations help maintain organized and visually appealing structures. For instance, a card component displaying images and text might use place-items-center for balanced alignment, paired with gap-2 for even spacing between child elements.

If you’re building nested grid structures, combining breadth-specific utilities like place-items-start for outer containers and align-self-center within child elements creates layered, dynamic compositions suited for complex dashboard designs or product showcases.

Accessibility Considerations

Enhance Readability and Navigability

Alignment impacts the user’s ability to quickly scan and interpret content on a page. Ensure place-items usage contributes to logical flow by aligning elements naturally within their container. For example, use place-items-start to anchor critical content to predictable locations, such as the top-left corner for introductory sections.

Promote readability by aligning text-based content consistently. Pair place-items with subtle spacing utilities like p-4 and ensure sufficient whitespace. For instance, in testimonial cards, place-items-center ensures quotes are both visually centralized and easy to navigate cognitively.

When aligning interactive elements, favor central alignment in smaller containers to group and highlight components effectively. This ensures users don’t struggle to distinguish or locate actionable content.

Order Height