0
0
Tailwindmarkup~5 mins

Place items alignment in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Place items alignment helps you center or position items inside a container easily. It controls how items line up horizontally and vertically together.

When you want to center content both vertically and horizontally inside a box.
When you need to align items to the start or end inside a grid or flex container.
When you want to quickly adjust the position of multiple items inside a container without extra CSS.
When building responsive layouts that need consistent item alignment.
When you want to keep your HTML clean and use utility classes for layout.
Syntax
Tailwind
place-items-{value}

// where {value} can be:
// start, center, end, stretch

This class works on containers with display: grid or display: inline-grid.

It sets both align-items and justify-items at the same time.

Examples
This centers the item horizontally and vertically inside the grid container.
Tailwind
<div class="grid place-items-center">
  <div>Centered Item</div>
</div>
This aligns the item to the top-left corner inside the grid container.
Tailwind
<div class="grid place-items-start">
  <div>Top Left Item</div>
</div>
This aligns the item to the bottom-right corner inside the grid container.
Tailwind
<div class="grid place-items-end">
  <div>Bottom Right Item</div>
</div>
This stretches the item to fill the grid cell both horizontally and vertically.
Tailwind
<div class="grid place-items-stretch">
  <div>Stretched Item</div>
</div>
Sample Program

This example shows a square box with a blue item perfectly centered inside using place-items-center. The container uses grid layout and the item is horizontally and vertically centered.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Place Items Alignment Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
  <section class="grid place-items-center h-48 w-48 bg-white border border-gray-300 mx-auto">
    <div class="bg-blue-500 text-white px-4 py-2 rounded">Centered</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Use place-items only on grid containers, not flex containers.

It combines align-items and justify-items for quick alignment.

For flexbox, use items- and justify- classes separately.

Summary

Place items alignment controls horizontal and vertical alignment of items inside a grid container.

Use place-items-center to center items both ways easily.

It simplifies layout by combining two alignment properties into one class.