Align Items Inside Grid Areas

Use one property for the inline axis and another for the block axis.

Start

A

B

C

justify-items: start moves items to the inline start. align-items: start moves them to the block start.

Center

A

B

C

Both properties set to center center each item within its own grid area.

End

A

B

C

Alignment does not move the tracks themselves. The next lesson aligns the full track collection.

Important HTML

Items sit inside their grid areas.

<div class="items-start">…</div>

Important CSS

justify-items and align-items move content in each cell.

.items-start {
  display: grid;
  justify-items: start;
  align-items: start;
}