Place Content

A shorthand utility that sets both align-content and justify-content properties at once. This makes it quicker to center or distribute space for content in both dimensions within a flex or grid container. In Tailwind v4, place utilities have improved compatibility with logical properties for better RTL support and work seamlessly with other layout features.

Flexbox & Grid1 variant6 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-cols-3 place-content-center h-64 bg-gray-100 p-4 rounded-lg gap-4">
  <div class="bg-blue-100 p-4 rounded">1</div>
  <div class="bg-blue-200 p-4 rounded">2</div>
  <div class="bg-blue-300 p-4 rounded">3</div>
  <div class="bg-blue-400 p-4 rounded">4</div>
</div>

Examples

Grid with content centered both horizontally and vertically

<div class="grid grid-cols-3 place-content-center h-64 bg-gray-100 p-4 rounded-lg gap-4">
  <div class="bg-blue-100 p-4 rounded">1</div>
  <div class="bg-blue-200 p-4 rounded">2</div>
  <div class="bg-blue-300 p-4 rounded">3</div>
  <div class="bg-blue-400 p-4 rounded">4</div>
</div>

Edit in playground

Grid with content aligned to the top-left

<div class="grid grid-cols-3 place-content-start h-64 bg-gray-100 p-4 rounded-lg gap-4">
  <div class="bg-green-100 p-4 rounded">1</div>
  <div class="bg-green-200 p-4 rounded">2</div>
  <div class="bg-green-300 p-4 rounded">3</div>
  <div class="bg-green-400 p-4 rounded">4</div>
</div>

Edit in playground

Grid with content aligned to the bottom-right

<div class="grid grid-cols-3 place-content-end h-64 bg-gray-100 p-4 rounded-lg gap-4">
  <div class="bg-purple-100 p-4 rounded">1</div>
  <div class="bg-purple-200 p-4 rounded">2</div>
  <div class="bg-purple-300 p-4 rounded">3</div>
  <div class="bg-purple-400 p-4 rounded">4</div>
</div>

Edit in playground

Grid with content distributed evenly with first items at start and last items at end

<div class="grid grid-cols-3 place-content-between h-64 bg-gray-100 p-4 rounded-lg gap-4">
  <div class="bg-blue-100 p-4 rounded">1</div>
  <div class="bg-blue-200 p-4 rounded">2</div>
  <div class="bg-blue-300 p-4 rounded">3</div>
  <div class="bg-blue-400 p-4 rounded">4</div>
  <div class="bg-blue-500 p-4 rounded text-white">5</div>
  <div class="bg-blue-600 p-4 rounded text-white">6</div>
</div>

Edit in playground

Loading spinner perfectly centered in container using place-content-center

<!-- Loading state centered in container -->
<div class="h-96 w-full bg-gray-100 rounded-lg flex place-content-center">
  <div class="flex flex-col items-center">
    <div class="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mb-4"></div>
    <p class="text-gray-600">Loading content...</p>
  </div>
</div>

Edit in playground

404 error page with centered content

<!-- 404 page with centered content -->
<div class="min-h-[500px] bg-gray-50 rounded-lg flex place-content-center text-center p-4">
  <div>
    <div class="text-6xl font-bold text-gray-300 mb-4">404</div>
    <h1 class="text-2xl font-bold mb-2">Page Not Found</h1>
    <p class="text-gray-600 mb-6 max-w-md">We couldn't find the page you're looking for. It might have been moved or deleted.</p>
    <button class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Go Back Home</button>
  </div>
</div>

Edit in playground

Live Preview

Try the Place Content utility with different values

Open Interactive Playground

Variants

start: packs content at start in both dimensions; end: packs content at end in both dimensions; center: centers content in both dimensions; between: distributes content with space between in both dimensions; around: distributes content with space around in both dimensions; evenly: distributes content with equal space between items in both dimensions; stretch: stretches items to fill the container in both dimensions

startendcenterbetweenaroundevenlystretch