Browser Support

Menu

Tailwind CSS Place Self

The place-self property combines both the align-self and justify-self properties for elements inside a grid container. This places items within their grid area on both axes. Tailwind CSS provides a rich set of utilities to leverage the place-self property, allowing developers to style elements efficiently without the need to write custom CSS.

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

Overview of Place Self

Auto Placement

The auto value of place-self sets grid item to follow the container's existing alignment. It’s a default fallback for many layouts.

This is a live editor. Play around with it!

export default function PlaceSelfAuto() {
  return (
    <div className="w-screen h-screen grid grid-cols-2 bg-gray-50">
      {/* place-self: auto */}
      <div className="place-self-auto bg-blue-300 h-20 w-20" />
      <div className="bg-pink-300 h-20 w-20" />
      <div className="bg-green-300 h-20 w-20" />
      <div className="bg-red-300 h-20 w-20" />
    </div>
  );
}

Placement at the Start

The place-self-start utility aligns the grid item to the beginning on both primary and cross axes in the grid.

This is a live editor. Play around with it!

export default function PlaceSelfStart() {
  return (
    <div className="w-screen h-screen grid grid-cols-2 bg-gray-50">
      {/* place-self: start */}
      <div className="place-self-start bg-blue-300 h-20 w-20" />
      <div className="bg-pink-300 h-20 w-20" />
      <div className="bg-green-300 h-20 w-20" />
      <div className="bg-red-300 h-20 w-20" />
    </div>
  );
}

Placement at the Center

The place-self-center utility centers an item within its grid cell. The item is centrally aligned both horizontally and vertically.

This is a live editor. Play around with it!

export default function PlaceSelfCenteredItem() {
  return (
    <div className="w-screen h-screen grid grid-cols-2 bg-gray-50">
      {/* place-self: center */}
      <div className="place-self-center bg-blue-300 h-20 w-20" />
      <div className="bg-pink-300 h-20 w-20" />
      <div className="bg-green-300 h-20 w-20" />
      <div className="bg-red-300 h-20 w-20" />
    </div>
  );
}

Placement at the End

The place-self-end utility aligns the grid item to the end within its grid area.

This is a live editor. Play around with it!

export default function PlaceSelfEndItem() {
  return (
    <div className="w-screen h-screen grid grid-cols-2 bg-gray-50">
      {/* place-self: end */}
      <div className="place-self-end bg-blue-300 h-20 w-20" />
      <div className="bg-pink-300 h-20 w-20" />
      <div className="bg-green-300 h-20 w-20" />
      <div className="bg-red-300 h-20 w-20" />
    </div>
  );
}

Stretched Placement

The place-self-stretch utility stretches an item to occupy the entire grid cell, .

This is a live editor. Play around with it!

export default function PlaceSelfStretchItem() {
  return (
    <div className="w-screen h-screen grid grid-cols-2 bg-gray-50">
      {/* place-self: start */}
      <div className="place-self-stretch bg-blue-300" />
      <div className="bg-pink-300 h-20 w-20" />
      <div className="bg-green-300 h-20 w-20" />
      <div className="bg-red-300 h-20 w-20" />
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind utilities for place-self can also be conditionally applied using state prefixes like hover or focus, e.g., hover:place-self-center. In the below snippet, click on the first grid item to align it to the end.

This is a live editor. Play around with it!

export default function HoverPlaceSelf() {
  return (
    <div className="w-screen h-screen grid grid-cols-2 bg-gray-50">
      {/* On focus => place-self: end */}
      <div tabindex="0" className="focus:place-self-end bg-blue-300 h-20 w-20" />
      <div className="bg-pink-300 h-20 w-20" />
      <div className="bg-green-300 h-20 w-20" />
      <div className="bg-red-300 h-20 w-20" />
    </div>
  );
}

Breakpoint Modifiers

Tailwind lets you apply the place-self utilities conditionally according to the screen width using breakpoint modifiers, e.g., sm:place-self-center, lg:place-self-end. In the below snippet, the first grid item aligns itself to the end once the screen hits md breakpoint.

This is a live editor. Play around with it!

export default function ResponsivePlaceSelf() {
  return (
    <div className="w-screen h-screen grid grid-cols-2 bg-gray-50">
      {/* On md => place-self: end */}
      <div className="md:place-self-end bg-blue-300 h-20 w-20" />
      <div className="bg-pink-300 h-20 w-20" />
      <div className="bg-green-300 h-20 w-20" />
      <div className="bg-red-300 h-20 w-20" />
    </div>
  );
}

Real World Examples

Product Card Grid

A responsive grid layout for an e-commerce product listing page where featured products are positioned distinctly using place-self utilities.

This is a live editor. Play around with it!

const ProductGrid = () => {
  const products = [
    {
      id: 1,
      name: "Premium Headphones",
      price: "$299",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Premium wireless headphones in black"
    },
    {
      id: 2,
      name: "Smart Watch",
      price: "$199",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Smart watch with black strap"
    },
    {
      id: 3,
      name: "Wireless Earbuds",
      price: "$149",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df",
      alt: "White wireless earbuds"
    },
    {
      id: 4,
      name: "Bluetooth Speaker",
      price: "$79",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1",
      alt: "Portable bluetooth speaker"
    },
    {
      id: 5,
      name: "Gaming Mouse",
      price: "$59",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1527814050087-3793815479db",
      alt: "RGB gaming mouse"
    },
    {
      id: 6,
      name: "Mechanical Keyboard",
      price: "$129",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical keyboard"
    }
  ];

  return (
    <div className="w-full max-w-sm mx-auto p-4">
      <div className="grid grid-cols-2 gap-4">
        {products.map(product => (
          <div
            key={product.id}
            className={`rounded-lg shadow-md bg-white p-2 ${
              product.isFeatured ? 'place-self-center col-span-2' : ''
            }`}
          >
            <img
              src={product.src}
              alt={product.alt}
              className="w-full h-24 object-cover rounded-md"
            />
            <h3 className="text-sm font-semibold mt-2">{product.name}</h3>
            <p className="text-xs text-gray-600">{product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductGrid;

Task Priority Board

A kanban-style task board where urgent tasks are positioned prominently using place-self utilities.

This is a live editor. Play around with it!

const TaskBoard = () => {
  const tasks = [
    {
      id: 1,
      title: "Update Security Patches",
      priority: "urgent",
      category: "tech",
      dueDate: "Today",
      assignee: "Alex"
    },
    {
      id: 2,
      title: "Client Meeting Notes",
      priority: "normal",
      category: "admin",
      dueDate: "Tomorrow",
      assignee: "Sarah"
    },
    {
      id: 3,
      title: "Database Backup",
      priority: "urgent",
      category: "tech",
      dueDate: "Today",
      assignee: "Mike"
    },
    {
      id: 4,
      title: "Review PR #234",
      priority: "normal",
      category: "dev",
      dueDate: "This week",
      assignee: "John"
    },
    {
      id: 5,
      title: "Server Migration",
      priority: "urgent",
      category: "tech",
      dueDate: "Tomorrow",
      assignee: "Lisa"
    },
    {
      id: 6,
      title: "Update Documentation",
      priority: "normal",
      category: "dev",
      dueDate: "Next week",
      assignee: "Tom"
    }
  ];

  return (
    <div className="w-full max-w-sm mx-auto p-4 bg-gray-100">
      <div className="grid grid-cols-1 gap-3">
        {tasks.map(task => (
          <div
            key={task.id}
            className={`p-3 rounded-lg ${
              task.priority === 'urgent'
                ? 'bg-red-50 place-self-start'
                : 'bg-white place-self-end'
            }`}
          >
            <h4 className="text-sm font-semibold">{task.title}</h4>
            <div className="flex justify-between mt-2">
              <span className="text-xs bg-gray-200 px-2 py-1 rounded">
                {task.category}
              </span>
              <span className="text-xs text-gray-600">{task.dueDate}</span>
            </div>
            <p className="text-xs text-gray-500 mt-1">Assigned to: {task.assignee}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TaskBoard;

Team Member Directory

A grid layout showcasing team members where team leads are positioned prominently using place-self utilities.

This is a live editor. Play around with it!

const TeamDirectory = () => {
  const members = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "Team Lead",
      department: "Engineering",
      isLead: true,
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Sarah Johnson profile picture"
    },
    {
      id: 2,
      name: "Mike Chen",
      role: "Developer",
      department: "Frontend",
      isLead: false,
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Mike Chen profile picture"
    },
    {
      id: 3,
      name: "Emily White",
      role: "Team Lead",
      department: "Design",
      isLead: true,
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Emily White profile picture"
    },
    {
      id: 4,
      name: "David Kim",
      role: "Designer",
      department: "UI/UX",
      isLead: false,
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "David Kim profile picture"
    },
    {
      id: 5,
      name: "Lisa Park",
      role: "Developer",
      department: "Backend",
      isLead: false,
      src: "https://images.unsplash.com/photo-1517841905240-472988babdf9",
      alt: "Lisa Park profile picture"
    },
    {
      id: 6,
      name: "Tom Wilson",
      role: "Team Lead",
      department: "Product",
      isLead: true,
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Tom Wilson profile picture"
    }
  ];

  return (
    <div className="w-full max-w-sm mx-auto p-4 bg-gray-50">
      <div className="grid grid-cols-2 gap-4">
        {members.map(member => (
          <div
            key={member.id}
            className={`bg-white rounded-lg shadow-sm p-3 ${
              member.isLead ? 'place-self-stretch col-span-2' : 'place-self-center'
            }`}
          >
            <div className="flex items-center space-x-3">
              <img
                src={member.src}
                alt={member.alt}
                className={`rounded-full ${
                  member.isLead ? 'w-12 h-12' : 'w-8 h-8'
                }`}
              />
              <div>
                <h3 className="text-sm font-semibold">{member.name}</h3>
                <p className="text-xs text-gray-600">{member.role}</p>
                <p className="text-xs text-gray-400">{member.department}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TeamDirectory;

Achievement Showcase

A grid displaying user achievements where special achievements are positioned distinctly using place-self utilities.

This is a live editor. Play around with it!

const AchievementShowcase = () => {
  const achievements = [
    {
      id: 1,
      title: "Master Coder",
      description: "Completed 100 coding challenges",
      isSpecial: true,
      icon: "https://images.unsplash.com/photo-1523800503107-5bc3ba2a6f81",
      points: 1000
    },
    {
      id: 2,
      title: "Bug Hunter",
      description: "Found 50 bugs in production",
      isSpecial: false,
      icon: "https://images.unsplash.com/photo-1546410531-bb4caa6b424d",
      points: 500
    },
    {
      id: 3,
      title: "Team Player",
      description: "Collaborated on 30 projects",
      isSpecial: true,
      icon: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca",
      points: 800
    },
    {
      id: 4,
      title: "Early Bird",
      description: "First to complete sprint tasks",
      isSpecial: false,
      icon: "https://images.unsplash.com/photo-1533619239233-6280475a633a",
      points: 300
    },
    {
      id: 5,
      title: "Code Reviewer",
      description: "Reviewed 200 pull requests",
      isSpecial: false,
      icon: "https://images.unsplash.com/photo-1515879218367-8466d910aaa4",
      points: 400
    },
    {
      id: 6,
      title: "Documentation Hero",
      description: "Updated 100 documentation pages",
      isSpecial: true,
      icon: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40",
      points: 750
    }
  ];

  return (
    <div className="w-full max-w-sm mx-auto p-4 bg-gray-900">
      <div className="grid grid-cols-2 gap-3">
        {achievements.map(achievement => (
          <div
            key={achievement.id}
            className={`rounded-lg p-3 ${
              achievement.isSpecial
                ? 'bg-gradient-to-br from-purple-600 to-blue-600 place-self-stretch'
                : 'bg-gray-800 place-self-center'
            }`}
          >
            <div className="flex flex-col items-center">
              <img
                src={achievement.icon}
                alt={achievement.title}
                className="w-8 h-8 rounded object-cover mb-2"
              />
              <h3 className="text-sm font-bold text-white">{achievement.title}</h3>
              <p className="text-xs text-gray-300 text-center mt-1">
                {achievement.description}
              </p>
              <span className="text-xs text-yellow-400 mt-2">
                {achievement.points} pts
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default AchievementShowcase;

News Feed Layout

A news feed where featured articles are positioned prominently using place-self utilities.

This is a live editor. Play around with it!

const NewsFeed = () => {
  const articles = [
    {
      id: 1,
      title: "The Future of AI in Healthcare",
      category: "Technology",
      isFeatured: true,
      readTime: "8 min",
      author: "Dr. Sarah Smith",
      src: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d",
      alt: "AI in healthcare illustration"
    },
    {
      id: 2,
      title: "Sustainable Living Tips",
      category: "Lifestyle",
      isFeatured: false,
      readTime: "5 min",
      author: "Mike Johnson",
      src: "https://images.unsplash.com/photo-1542601906990-b4d3fb778b09",
      alt: "Sustainable living"
    },
    {
      id: 3,
      title: "Space Exploration Breakthrough",
      category: "Science",
      isFeatured: true,
      readTime: "10 min",
      author: "Prof. James Wilson",
      src: "https://images.unsplash.com/photo-1446776811953-b23d57bd21aa",
      alt: "Space exploration"
    },
    {
      id: 4,
      title: "New Fitness Trends 2025",
      category: "Health",
      isFeatured: false,
      readTime: "6 min",
      author: "Lisa Chen",
      src: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438",
      alt: "Fitness trends"
    },
    {
      id: 5,
      title: "Global Economic Outlook",
      category: "Finance",
      isFeatured: false,
      readTime: "7 min",
      author: "Robert Park",
      src: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3",
      alt: "Economic graph"
    },
    {
      id: 6,
      title: "Revolutionary Clean Energy Solutions",
      category: "Environment",
      isFeatured: true,
      readTime: "9 min",
      author: "Emma Davis",
      src: "https://images.unsplash.com/photo-1508514177221-188b1cf16e9d",
      alt: "Clean energy"
    }
  ];

  return (
    <div className="w-full max-w-sm mx-auto p-4 bg-white">
      <div className="grid grid-cols-1 gap-4">
        {articles.map(article => (
          <div
            key={article.id}
            className={`rounded-lg shadow-sm overflow-hidden ${
              article.isFeatured 
                ? 'bg-gradient-to-r from-indigo-50 to-blue-50 place-self-stretch'
                : 'bg-white place-self-center'
            }`}
          >
            <img
              src={article.src}
              alt={article.alt}
              className={`w-full object-cover ${
                article.isFeatured ? 'h-32' : 'h-24'
              }`}
            />
            <div className="p-3">
              <div className="flex justify-between items-center mb-2">
                <span className="text-xs font-medium text-blue-600">
                  {article.category}
                </span>
                <span className="text-xs text-gray-500">{article.readTime}</span>
              </div>
              <h3 className={`font-semibold mb-1 ${
                article.isFeatured ? 'text-sm' : 'text-xs'
              }`}>
                {article.title}
              </h3>
              <p className="text-xs text-gray-600">By {article.author}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default NewsFeed;

Best Practices

Maintain Design Consistency

Always align your utility choices with your project's design system or style guide. For example, if your grids frequently use place-self-center to centralize elements, ensure this is consistently applied throughout your components for a uniform appearance. Consistency becomes particularly important in collaborative projects where multiple developers are working on different parts of the UI.

In scenarios where different sections need varying alignments, consider grouping sections with unified alignment themes. For instance, a dashboard might have a place-self-start alignment for navigation components, and place-self-center or place-self-end for featured content or infoboxes. This keeps the visual hierarchy intact while providing flexibility for different layouts.

Leverage Utility Combinations

Pairing place-self utilities with spacing controls like gap-*, padding (p-*), or margin (m-*) results in better spacing management while maintaining alignment precision. For example, a grid layout with combined place-self-center and gap-4 utility ensures well-aligned, aesthetically pleasing content.

Consider using place-self alongside color, shadow, or transition utilities. For instance, pair place-self-center with shadow-lg and hover:scale-105 for elevating specific grid items dynamically while maintaining their centered alignment. This approach helps introduce interactive elements without compromising the design layout.

Accessibility Considerations

Enhance Readability and Navigability

The place-self utilities directly influence how content is aligned, affecting readability and navigability. Proper alignment ensures that visual elements remain predictable and organized, allowing users to easily locate important content. For example, using place-self-start for labels or headers ensures logical, top-aligned text placement that guides users.

Ensure that every alignment choice contributes to a logical content flow. Pair place-self utilities with semantic HTML tags and aria-* attributes to ensure accessible, navigable interfaces. By doing so, you optimize the user experience for individuals relying on adaptive aids.

Focus on High Contrast

Alignment impacts the visual relationship between elements, which directly ties into accessibility through contrast. Leveraging place-self to centralize or focus elements against contrasting backgrounds increases their prominence. For instance, use place-self-center with background utilities like bg-gray-800 and text utilities like text-gray-100 to enhance contrast for users with low vision.

Supplement place-self with Tailwind's border and shadow utilities to define element boundaries clearly. For interactive components, like buttons in a grid format, use hover transitions (hover:shadow-lg) for further differentiation.

Additionally, test designs using online contrast checkers to validate the effectiveness of your alignments. Balancing place-self utilities with Tailwind’s color palette that meet WCAG guidelines ensures compliant and accessible designs.

Place Content Spacing