Back to Flexbox & Grid

Place Items

A shorthand utility that sets both align-items and justify-items properties at once. This allows for quick positioning of all grid or flex items within their individual areas or cells. Place-items is particularly useful in grid layouts where you want consistent alignment behavior in both dimensions. In Tailwind v4, place utilities work seamlessly with other layout properties and have improved RTL support.

Flexbox & Grid1 variant6 examples
Official DocsOpen Playground

Examples

Grid with all items centered within their cells
<div class="grid grid-cols-3 place-items-center gap-4 h-64 bg-gray-100 p-4 rounded-lg">
  <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
Grid with all items aligned to the top-left of their cells
<div class="grid grid-cols-3 place-items-start gap-4 h-64 bg-gray-100 p-4 rounded-lg">
  <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 class="bg-green-500 p-4 rounded text-white">5</div>
  <div class="bg-green-600 p-4 rounded text-white">6</div>
</div>
Edit in playground
Grid with all items aligned to the bottom-right of their cells
<div class="grid grid-cols-3 place-items-end gap-4 h-64 bg-gray-100 p-4 rounded-lg">
  <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 class="bg-purple-500 p-4 rounded text-white">5</div>
  <div class="bg-purple-600 p-4 rounded text-white">6</div>
</div>
Edit in playground
Grid with all items stretched to fill their cells in both dimensions
<div class="grid grid-cols-3 place-items-stretch gap-4 h-64 bg-gray-100 p-4 rounded-lg">
  <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
Image gallery with centered thumbnails using place-items-center
<!-- Image gallery with centered thumbnails -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 place-items-center gap-4 p-4 bg-gray-100 rounded-lg">
  <div class="w-24 h-24 bg-blue-100 rounded-lg flex items-center justify-center">Image 1</div>
  <div class="w-24 h-24 bg-blue-200 rounded-lg flex items-center justify-center">Image 2</div>
  <div class="w-24 h-24 bg-blue-300 rounded-lg flex items-center justify-center">Image 3</div>
  <div class="w-24 h-24 bg-blue-400 rounded-lg flex items-center justify-center">Image 4</div>
  <div class="w-24 h-24 bg-blue-500 rounded-lg flex items-center justify-center text-white">Image 5</div>
  <div class="w-24 h-24 bg-blue-600 rounded-lg flex items-center justify-center text-white">Image 6</div>
  <div class="w-24 h-24 bg-blue-700 rounded-lg flex items-center justify-center text-white">Image 7</div>
  <div class="w-24 h-24 bg-blue-800 rounded-lg flex items-center justify-center text-white">Image 8</div>
</div>
Edit in playground
Icon grid with consistent centered alignment for icon-label pairs
<!-- Icon grid with consistent alignment -->
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 place-items-center gap-8 p-6 bg-white rounded-lg shadow-md">
  <div class="flex flex-col items-center text-center">
    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
      </svg>
    </div>
    <span class="text-sm font-medium">Home</span>
  </div>
  <div class="flex flex-col items-center text-center">
    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
      </svg>
    </div>
    <span class="text-sm font-medium">Profile</span>
  </div>
  <div class="flex flex-col items-center text-center">
    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center text-yellow-600 mb-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
      </svg>
    </div>
    <span class="text-sm font-medium">Notifications</span>
  </div>
  <div class="flex flex-col items-center text-center">
    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-2">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
    </div>
    <span class="text-sm font-medium">Settings</span>
  </div>
</div>
Edit in playground

Live Preview

Try the Place Items utility with different values

Open Interactive Playground

Variants

start: aligns items to start in both dimensions; end: aligns items to end in both dimensions; center: centers items in both dimensions; stretch: stretches items to fill their grid areas in both dimensions

startendcenterstretch

Tips & Reference

Experiment in Playground

Related Functions

Flex DirectionControls the direction in which flex items are placed in the...
Flex WrapControls whether flex items should wrap onto multiple lines ...
FlexSets how a flex item grows or shrinks to fit available space...
Flex GrowControls the ability of a flex item to grow when there is ex...
Flex ShrinkControls the ability of a flex item to shrink when there isn...
View all Flexbox & Grid utilities