justify-items

Utilities for controlling how grid items are aligned along their inline axis.

Class Styles

justify-items-start

justify-items: start;

justify-items-end

justify-items: end;

justify-items-center

justify-items: center;

justify-items-stretch

justify-items: stretch;

justify-items-normal

justify-items: normal;

Examples

Use justify-items-start to justify grid items against the start of their inline axis:

<div class="grid justify-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Use justify-items-end to justify grid items against the end of their inline axis:

<div class="grid justify-items-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Use justify-items-center to justify grid items along their inline axis:

<div class="grid justify-items-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Use justify-items-stretch to stretch items along their inline axis:

<div class="grid justify-items-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Prefix a justify-items utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="grid justify-items-start md:justify-items-center ...">
  <!-- ... -->
</div>

Learn more about using variants in the variants documentation.