Place items alignment in Tailwind - Browser Rendering Trace

Render Flow - Place items alignment

Parse Tailwind class

↓

Identify place-items property

↓

Apply align-items and justify-items

↓

Calculate grid/flex container layout

↓

Position children accordingly

↓

Paint final layout

The browser reads the Tailwind class for place-items, which sets both align-items and justify-items. It then calculates the layout of the container and positions the children accordingly before painting the final visual.

Render Steps - 3 Steps

Code Added:display: grid;

Before

[__________]
|          |
|          |
|          |
|__________|

→

After

[__________]
|[Item]    |
|          |
|          |
|__________|

The container becomes a grid, but no alignment is set yet, so the child stays at the top-left by default.

🔧 Browser Action:Creates grid formatting context and prepares for grid layout

Code Sample

A grid container with a fixed size and border, with its single child centered both horizontally and vertically using place-items-center.

Tailwind

<div class="grid place-items-center w-64 h-32 border">
  <div class="bg-blue-500 text-white p-4">Centered Item</div>
</div>

Tailwind

/* Tailwind generated CSS equivalent */
.grid {
  display: grid;
}
.place-items-center {
  place-items: center;
}
.w-64 {
  width: 16rem;
}
.h-32 {
  height: 8rem;
}
.border {
  border: 1px solid #000;
}
.bg-blue-500 {
  background-color: #3b82f6;
}
.text-white {
  color: #fff;
}
.p-4 {
  padding: 1rem;
}

Render Quiz - 3 Questions

After applying step 2 (place-items: center), where is the child positioned inside the container?

A Centered horizontally and vertically

B Top-left corner

C Bottom-right corner

D Centered horizontally only

Common Confusions - 2 Topics

Why doesn't place-items work on a flex container?

place-items only works on grid containers. For flex containers, you must use align-items and justify-content separately.

💡 Use place-items only with display:grid; for flex, use align-items and justify-content.

Why is my item not centered vertically even with place-items-center?

If the container has no height or the child is larger than the container, centering won't be visible. Make sure the container has a fixed height.

💡 Set container height to see vertical centering effect.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
place-items	center	Both (horizontal & vertical)	Centers items inside grid or flex container	Center content easily
align-items	center	Vertical (cross axis)	Centers items vertically	Vertical alignment in flex/grid
justify-items	center	Horizontal (main axis in grid)	Centers items horizontally	Horizontal alignment in grid
place-items	start	Both	Aligns items to start top-left	Default alignment
place-items	end	Both	Aligns items to bottom-right	Align items to end

Concept Snapshot

place-items sets both align-items and justify-items together. Works only on grid containers. Common values: center, start, end. Centers children horizontally and vertically. Requires container to have display:grid. Useful for quick centering inside grids.