Centre items inside Grid cells

Align all items on the inline and block axes of their cells.

Official sourceW3C CSS Box Alignment — justify-items and align-itemsReviewed: 2026-08-26

STEP 1 · LEARN

How it works

justify-items sets the default item alignment on the inline axis, while align-items controls the block axis. center centres each item in its available area.

Correct example

.icons { display: grid; justify-items: center; align-items: center; }

Each item is centred horizontally and vertically in its own cell.

Common mistake

.icons { display: grid; justify-content: center; }

justify-content aligns the grid as a whole when free space exists; it does not set each item’s alignment within its cell.

STEP 2 · APPLY

Your exercise

Enable Grid and centre items with justify-items and align-items.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The group uses Grid.
Items are centred on the inline axis.
Items are centred on the block axis.
The target element is present in the page.

Explain the solution logic

The two properties control default Grid-item alignment on perpendicular axes.

How it works

Your exercise

Write and see the result

What needs to pass