Align Items

Utilities for controlling the alignment of grid items within the grid container along the inline (row) axis.

Class Name	CSS Equivalent
items-start	align-items: flex-start;
items-center	align-items: center;
items-end	align-items: flex-end;
items-stretch	align-items: stretch;
items-baseline	align-items: baseline;

Align Items Start

The .items-start class sets the align-items property to flex-start, aligning grid items along the inline (row) axis at the start.

<div class="flex gap-s items-start h-3xs">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Align Items Center

The .items-center class sets the align-items property to center, aligning grid items along the inline (row) axis at the center.

<div class="flex gap-s items-center h-3xs">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Align Items End

The .items-end class sets the align-items property to flex-end, aligning grid items along the inline (row) axis at the end.

<div class="flex gap-s items-end h-3xs">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Align Items Stretch

The .items-stretch class sets the align-items property to stretch, allowing grid items to stretch along the inline (row) axis.

<div class="flex gap-s items-stretch h-3xs">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

Align Items Baseline

Participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.