Browser Support

Menu

Tailwind CSS Place Content

The place-content shorthand property helps to control alignment in both CSS Grid and Flexbox layouts. It combines the properties align-content and justify-content, streamlining the process of managing the distribution and alignment of content.

Tailwind CSS simplifies this further by providing a set of utility classes, allowing you to effectively work with place-content without writing custom CSS.

Class	Properties	Example
`place-content-center`	`place-content: center;`	`<div className="place-content-center"></div>`
`place-content-start`	`place-content: start;`	`<div className="place-content-start"></div>`
`place-content-end`	`place-content: end;`	`<div className="place-content-end"></div>`
`place-content-between`	`place-content: space-between;`	`<div className="place-content-between"></div>`
`place-content-around`	`place-content: space-around;`	`<div className="place-content-around"></div>`
`place-content-evenly`	`place-content: space-evenly;`	`<div className="place-content-evenly"></div>`
`place-content-baseline`	`place-content: baseline;`	`<div className="place-content-baseline"></div>`
`place-content-stretch`	`place-content: stretch;`	`<div className="place-content-stretch"></div>`

Alignment Utilities

Centrally Align Content

To position your grid or flexbox content at the center of its container, use place-content-center utility.

This is a live editor. Play around with it!

export default function CenterAlign() {
  return (
    <div className="w-screen h-screen grid place-content-center bg-gray-100">
      {/* place-content-center sets align-content and justify-content to 'center' */}
      <div className="bg-blue-200 h-20 w-20" />
    </div>
  );
}

Align at the Start

To position your grid or flexbox content at the start of its container, use place-content-start utility.

This is a live editor. Play around with it!

export default function CenterAlign() {
  return (
    <div className="w-screen h-screen grid place-content-start bg-gray-100">
      {/* place-content-start sets align-content and justify-content to 'start' */}
      <div className="bg-blue-200 h-20 w-20" />
    </div>
  );
}

Push Content to the End

To position your grid or flexbox content at the end of its container, use place-content-end utility.

This is a live editor. Play around with it!

export default function CenterAlign() {
  return (
    <div className="w-screen h-screen grid place-content-end bg-gray-100">
      {/* place-content-start sets align-content and justify-content to 'end' */}
      <div className="bg-blue-200 h-20 w-20" />
    </div>
  );
}

Space Between Items

To add even spacing between items at the container’s edges, use place-content-between utility.

This is a live editor. Play around with it!

export default function SpaceBetweenAlign() {
  return (
    <div className="w-screen h-screen grid grid-cols-3 place-content-between gap-6 bg-gray-100">
      {/* place-content-between distributes available space between items */}
      {Array.from({ length: 6 }).map((_, index) => (
        <div
          key={index}
          className="bg-white rounded-md shadow-md h-20 flex items-center justify-center"
        >
          <p className="text-gray-600">Item {index + 1}</p>
        </div>
      ))}
    </div>
  );
}

Apply Around Spacing

To distribute items such that the space around each row is equal along the block axis, use place-content-around utility.

This is a live editor. Play around with it!

export default function SpaceAroundAlign() {
  return (
    <div className="w-screen h-screen grid grid-cols-3 place-content-around gap-6 bg-gray-100">
      {/* place-content-around adds padding between items and outer boundaries */}
      {Array.from({ length: 6 }).map((_, index) => (
        <div
          key={index}
          className="bg-white rounded-md shadow-md h-20 flex items-center justify-center"
        >
          <p className="text-gray-600">Item {index + 1}</p>
        </div>
      ))}
    </div>
  );
}

Even Distribution of Space

To distribute items such that the space around them is even along the block axis, use place-content-even utility.

This is a live editor. Play around with it!

export default function SpaceEvenly() {
  return (
    <div className="w-screen h-screen grid grid-cols-3 place-content-evenly gap-6 bg-gray-100">
      {/* place-content-evenly creates equal spacing across all gaps */}
     {Array.from({ length: 6 }).map((_, index) => (
        <div
          key={index}
          className="bg-white rounded-md shadow-md h-20 w-28 flex items-center justify-center"
        >
          <p className="text-gray-600">Item {index + 1}</p>
        </div>
      ))}
    </div>
  );
}

Stretch Across Container

To expand and ensure flex/grid items stretch to fit the container boundaries, use place-content-stretch utility.

This is a live editor. Play around with it!

export default function StretchContent() {
  return (
    <div className="w-screen h-screen grid place-content-stretch bg-gray-100">
      {/* force-stretched grid items */}
      <div className="bg-red-200" />
      <div className="bg-blue-200" />
      <div className="bg-green-200" />
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind provides you state modifiers like hover, focus, etc. to distribute the flex and grid items only when these states are active. For example, hover:place-content-start will place the items at the start on hover.

This is a live editor. Play around with it!

export default function HoverAlignment() {
  return (
    <div className="w-screen h-screen grid bg-yellow-50">
      {/* Enable hover states for activated transitions */}
      <div className="place-content-center hover:place-content-start bg-red-100 transition duration-300 p-5">
        Hover to Align at Start
      </div>
    </div>
  );
}

Breakpoints Modifiers

Tailwind's breakpoint modifiers allow you to distribute the flex and grid items only when on certain screens(sm, md, etc.) and above. For example, md:place-content-start will place the items at the start on md breakpoint and above.

This is a live editor. Play around with it!

export default function ResponsiveBreakpoints() {
  return (
    <div className="h-screen grid">
      {/* Add screen breakpoints to modify alignment */}
      <div className="bg-indigo-100 md:place-content-center lg:place-content-start p-10 shadow">
        Responsive Alignment Adjustments
      </div>
    </div>
  );
}

Real World Examples

Fashion Store Grid

A responsive fashion product grid using place-content-evenly for equal spacing between products in a grid layout.

This is a live editor. Play around with it!

const FashionGrid = () => {
  const products = [
    {
      name: "Summer Floral Dress",
      price: "$89.99",
      src: "https://images.unsplash.com/photo-1612336307429-8a898d10e223",
      alt: "Floral summer dress"
    },
    {
      name: "Denim Jacket",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1576871337632-b9aef4c17ab9",
      alt: "Classic denim jacket"
    },
    {
      name: "Leather Boots",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1608256246200-53e635b5b65f",
      alt: "Brown leather boots"
    },
    {
      name: "Silk Scarf",
      price: "$45.99",
      src: "https://images.unsplash.com/photo-1584030373081-f37b7bb4fa8e",
      alt: "Patterned silk scarf"
    }
  ];

  return (
    <div className="h-96 bg-gray-50 p-4">
      <div className="grid grid-cols-2 gap-4 place-content-evenly h-full">
        {products.map((product) => (
          <div key={product.name} className="bg-white p-2 rounded-lg shadow-sm">
            <img 
              src={product.src} 
              alt={product.alt}
              className="w-full h-24 object-cover rounded"
            />
            <h3 className="text-sm font-medium mt-2">{product.name}</h3>
            <p className="text-xs text-gray-600">{product.price}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default FashionGrid;

Recipe Collection

A recipe card collection using place-content-center to create a centered arrangement of recipe cards.

This is a live editor. Play around with it!

const RecipeCollection = () => {
  const recipes = [
    {
      title: "Spicy Thai Noodles",
      time: "25 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1617093727343-374698b1b08d",
      alt: "Thai noodles in bowl"
    },
    {
      title: "Mediterranean Salad",
      time: "15 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1540189549336-e6e99c3679fe",
      alt: "Fresh mediterranean salad"
    },
    {
      title: "Chocolate Brownies",
      time: "45 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1606313564200-e75d5e30476c",
      alt: "Homemade brownies"
    },
    {
      title: "Grilled Salmon",
      time: "30 mins",
      difficulty: "Medium",
      src: "https://images.unsplash.com/photo-1485921325833-c519f76c4927",
      alt: "Grilled salmon fillet"
    },
    {
      title: "Mushroom Risotto",
      time: "40 mins",
      difficulty: "Hard",
      src: "https://images.unsplash.com/photo-1476124369491-e7addf5db371",
      alt: "Creamy mushroom risotto"
    },
    {
      title: "Berry Smoothie",
      time: "10 mins",
      difficulty: "Easy",
      src: "https://images.unsplash.com/photo-1553530666-ba11a7da3888",
      alt: "Mixed berry smoothie"
    }
  ];

  return (
    <div className="h-96 bg-orange-50 p-3">
      <div className="grid grid-cols-3 gap-3 place-content-center h-full">
        {recipes.map((recipe) => (
          <div key={recipe.title} className="bg-white rounded-lg shadow-sm overflow-hidden">
            <img 
              src={recipe.src} 
              alt={recipe.alt}
              className="w-full h-16 object-cover"
            />
            <div className="p-2">
              <h3 className="text-xs font-medium truncate">{recipe.title}</h3>
              <div className="flex justify-between mt-1">
                <span className="text-xs text-gray-500">{recipe.time}</span>
                <span className="text-xs text-gray-500">{recipe.difficulty}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RecipeCollection;

Team Directory

A team member directory using place-content-around for distributed spacing of team member cards.

This is a live editor. Play around with it!

const TeamDirectory = () => {
  const team = [
    {
      name: "Sarah Chen",
      role: "Product Designer",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Chen profile photo"
    },
    {
      name: "James Wilson",
      role: "Frontend Developer",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Wilson profile photo"
    },
    {
      name: "Maria Garcia",
      role: "UX Researcher",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Maria Garcia profile photo"
    },
    {
      name: "Alex Kim",
      role: "Backend Developer",
      src: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d",
      alt: "Alex Kim profile photo"
    },
    {
      name: "Lisa Patel",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Lisa Patel profile photo"
    },
    {
      name: "David Brown",
      role: "DevOps Engineer",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "David Brown profile photo"
    }
  ];

  return (
    <div className="h-96 bg-blue-50 p-4">
      <div className="grid grid-cols-3 gap-2 place-content-around h-full">
        {team.map((member) => (
          <div key={member.name} className="flex flex-col items-center bg-white p-2 rounded-lg">
            <img 
              src={member.src} 
              alt={member.alt}
              className="w-12 h-12 rounded-full object-cover"
            />
            <h3 className="text-xs font-medium mt-2">{member.name}</h3>
            <p className="text-xs text-gray-500">{member.role}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TeamDirectory;

Game Library

A video game library using place-content-between for maximized spacing between game cards.

This is a live editor. Play around with it!

const GameLibrary = () => {
  const games = [

    {
      title: "Medieval Quest",
      genre: "Adventure",
      rating: "4.6",
      src: "https://images.unsplash.com/photo-1591825729269-caeb344f6df2",
      alt: "Medieval game cover"
    },
    {
      title: "Future Racing",
      genre: "Sports",
      rating: "4.7",
      src: "https://images.unsplash.com/photo-1511512578047-dfb367046420",
      alt: "Racing game cover"
    },
    {
      title: "Monster Hunter",
      genre: "Action",
      rating: "4.9",
      src: "https://images.unsplash.com/photo-1542751371-adc38448a05e",
      alt: "Monster game cover"
    },
    {
      title: "City Builder",
      genre: "Simulation",
      rating: "4.5",
      src: "https://images.unsplash.com/photo-1496096265110-f83ad7f96608",
      alt: "City builder game cover"
    },
  ];

  return (
    <div className="h-96 bg-purple-50 p-3">
      <div className="grid grid-cols-2 gap-3 place-content-between h-full">
        {games.map((game) => (
          <div key={game.title} className="bg-white rounded-lg shadow-sm overflow-hidden">
            <img 
              src={game.src} 
              alt={game.alt}
              className="w-full h-20 object-cover"
            />
            <div className="p-2">
              <h3 className="text-xs font-medium">{game.title}</h3>
              <div className="flex justify-between mt-1">
                <span className="text-xs text-purple-600">{game.genre}</span>
                <span className="text-xs">⭐ {game.rating}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default GameLibrary;

Music Playlist

A music playlist interface using place-content-start to align tracks from the top of the container.

This is a live editor. Play around with it!

const MusicPlaylist = () => {
  const tracks = [
    {
      title: "Summer Breeze",
      artist: "Coastal Waves",
      duration: "3:45",
      src: "https://images.unsplash.com/photo-1459749411175-04bf5292ceea",
      alt: "Summer album cover"
    },
    {
      title: "Midnight Drive",
      artist: "The Wanderers",
      duration: "4:20",
      src: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819",
      alt: "Night drive album cover"
    },
    {
      title: "Mountain High",
      artist: "Peak Climbers",
      duration: "3:55",
      src: "https://images.unsplash.com/photo-1519389950473-47ba0277781c",
      alt: "Mountain album cover"
    },
    {
      title: "Urban Dreams",
      artist: "City Lights",
      duration: "4:10",
      src: "https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4",
      alt: "City album cover"
    },
  ];

  return (
    <div className="h-96 bg-green-50 p-2">
      <div className="grid grid-cols-1 gap-2 place-content-start h-full overflow-y-auto">
        {tracks.map((track) => (
          <div key={track.title} className="flex items-center bg-white p-2 rounded-lg">
            <img 
              src={track.src} 
              alt={track.alt}
              className="w-10 h-10 rounded object-cover"
            />
            <div className="ml-3 flex-1">
              <h3 className="text-xs font-medium">{track.title}</h3>
              <p className="text-xs text-gray-500">{track.artist}</p>
            </div>
            <span className="text-xs text-gray-400">{track.duration}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default MusicPlaylist;

Best Practices

Maintain Design Consistency

Aligning content consistently within grid or flex containers ensure a structured layout that users can navigate intuitively. Avoid excessive variations in content placement across similar sections, as inconsistencies can lead to a disjointed interface. Define a standard approach for content alignment and stick to it throughout the project to maintain consistency.

Ensure that the placement of items aligns with the overall design principles and branding guidelines. When working in large teams, document standard placement strategies to ensure uniformity across different components and pages.

Build Responsive Design

Ensuring that place-content-* utilities work effectively across different screen sizes enhances the user experience in responsive designs. By using responsive prefixes (sm:, md:, lg:), you can adjust content placement dynamically to suit various viewports.

In a dashboard layout, place-content-between can evenly distribute widgets or cards on larger screens, creating a well-balanced UI. On smaller screens, switching to place-content-center ensures that important elements remain focused and visually aligned for better usability. This approach maintains a structured layout while adapting seamlessly to different devices.

Since content alignment needs vary across screen sizes, it's important to test how place-content-* behaves at different breakpoints.

Accessibility Considerations

Enhance Readability and Navigability

Proper content placement improves readability and ease of navigation, ensuring that users can quickly scan and comprehend content. When using place-content-*, prioritize alignment that supports natural reading patterns. For languages that read left to right, center or left-aligned content typically enhances readability, while for right-to-left languages, the opposite applies.

Using place-content-start for lists and structured data can improve content discoverability, as users expect content to follow a natural hierarchy. On the other hand, place-content-center works well for small content blocks like call-to-action buttons but may not be ideal for body text in longer paragraphs.

Avoid excessive variation in alignment styles across sections, as sudden shifts in placement can disrupt user focus. Consistent alignment patterns improve readability and help users scan content efficiently, leading to a smoother browsing experience.

Focus on High Contrast

While place-content-* mainly affects content positioning, its role in contrast accessibility is often overlooked. Content alignment can influence perceived contrast, especially when elements overlap or align too closely with other elements.

When placing content, ensure that background elements do not interfere with text readability. For example, placing text over a gradient or patterned background may reduce visibility unless the contrast is sufficiently adjusted. Using bg-opacity-* or backdrop-blur-* utilities alongside place-content-* can help maintain contrast.

Another consideration is spacing around text and interactive elements. Poorly placed content may create cluttered layouts, making it difficult for users with visual impairments to distinguish elements. Ensuring that elements have sufficient separation prevents accessibility issues and enhances usability.

Place Items Place Self