Align Items

Controls flex and grid positioning along a container’s transverse axis.

Class	Properties
ai-b	align-items: baseline;
ai-c	align-items: center;
ai-fe	align-items: flex-end;
ai-fs	align-items: flex-start;
ai-s	align-items: stretch;

Baseline

Aligns items along the container’s baseline.

<div class="ai-b area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Center

Aligns items in the center of the cross axis.

<div class="ai-c area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Flex End

Aligns items at the end of the cross axis.

<div class="ai-fe area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Flex Start

Aligns items at the start of the cross axis.

<div class="ai-fs area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

Stretch

Stretches items to fill the container’s height.

<div class="ai-s area d-g g-4 gtc-3 h-64 tc-white ta-c w-full">
  <div class="bg-cyan fw-700 ins p-4 rad-2">A</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">B</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">C</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">D</div>
  <div class="bg-cyan fw-700 ins p-4 rad-2">E</div>
</div>

---

Using breakpoints

Using responsive breakpoints like sm:ai-*, md:ai-*, lg:ai-*, and xxl:ai-* allows targeting specific utilities in different viewports.

<div class="ai-s md:ai-e ..."></div>

Using variants

Using :hover variants such as h:ai-* allows you to override elements and change their values when hovering over them.

<div class="ai-s h:ai-e ..."></div>