# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/justify-items.mdx

import { CodeExampleStack } from "@/components/code-example";
import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";
import { Stripes } from "@/components/stripes.tsx";

export const title = "justify-items";
export const description = "Utilities for controlling how grid items are aligned along their inline axis.";

<ApiTable
  rows={[
    ["justify-items-start", "justify-items: start;"],
    ["justify-items-end", "justify-items: end;"],
    ["justify-items-end-safe", "justify-items: safe end;"],
    ["justify-items-center", "justify-items: center;"],
    ["justify-items-center-safe", "justify-items: safe center;"],
    ["justify-items-stretch", "justify-items: stretch;"],
    ["justify-items-normal", "justify-items: normal;"],
  ]}
/>

## Examples

### Start

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

<Figure>

<Example>
  {
    <div className="grid grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white">
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          01
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          02
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          03
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          04
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          05
        </div>
      </div>
      <div className="grid rounded-lg">
        <Stripes border className="col-start-1 row-start-1 rounded-lg" />
        <div className="col-start-1 row-start-1 flex size-14 items-center justify-center justify-self-start rounded-lg bg-sky-500">
          06
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-items-start] -->
<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>
```

</Figure>

### End

Use the `justify-items-end` or `justify-items-end-safe` utilities to justify grid items against the end of their inline axis:

<Figure hint="Resize the container to see the alignment behavior">

<Example resizable>
  {
    <div className="grid grid-cols-1 gap-8">
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">justify-items-end</p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="grid grid-cols-1 justify-items-end">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">01</div>
          </div>
          <div className="grid grid-cols-1 justify-items-end">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">02</div>
          </div>
          <div className="grid grid-cols-1 justify-items-end">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-blue-500 p-4">03</div>
          </div>
        </div>
      </div>
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-items-end-safe
        </p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="grid grid-cols-1 justify-items-end-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">01</div>
          </div>
          <div className="grid grid-cols-1 justify-items-end-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">02</div>
          </div>
          <div className="grid grid-cols-1 justify-items-end-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-purple-500 p-4">03</div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

<CodeExampleStack>

```html
<!-- [!code filename:justify-items-end] -->
<!-- [!code classes:justify-items-end] -->
<div class="grid grid-flow-col justify-items-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

```html
<!-- [!code filename:justify-items-end-safe] -->
<!-- [!code classes:justify-items-end-safe] -->
<div class="grid grid-flow-col justify-items-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</ CodeExampleStack>

</Figure>

When there is not enough space available, the `justify-items-end-safe` utility will align items to the start of the container instead of the end.

### Center

Use the `justify-items-center` or `justify-items-center-safe` utilities to justify grid items against the end of their inline axis:

<Figure hint="Resize the container to see the alignment behavior">

<Example resizable>
  {
    <div className="grid grid-cols-1 gap-8">
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-items-center
        </p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="grid grid-cols-1 justify-items-center">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">01</div>
          </div>
          <div className="grid grid-cols-1 justify-items-center">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">02</div>
          </div>
          <div className="grid grid-cols-1 justify-items-center">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-indigo-500 p-4">03</div>
          </div>
        </div>
      </div>
      <div>
        <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
          justify-items-center-safe
        </p>
        <div className="mt-4 grid auto-rows-fr grid-cols-3 justify-items-stretch gap-10 text-center font-mono text-sm leading-6 font-bold text-white">
          <div className="grid grid-cols-1 justify-items-center-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">01</div>
          </div>
          <div className="grid grid-cols-1 justify-items-center-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">02</div>
          </div>
          <div className="grid grid-cols-1 justify-items-center-safe">
            <Stripes border className="col-start-1 row-start-1 justify-self-stretch rounded-lg" />
            <div className="col-start-1 row-start-1 size-14 rounded-lg bg-fuchsia-500 p-4">03</div>
          </div>
        </div>
      </div>
    </div>
  }
</Example>

<CodeExampleStack>

```html
<!-- [!code filename:justify-items-center] -->
<!-- [!code classes:justify-items-center] -->
<div class="grid grid-flow-col justify-items-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

```html
<!-- [!code filename:justify-items-center-safe] -->
<!-- [!code classes:justify-items-center-safe] -->
<div class="grid grid-flow-col justify-items-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>
```

</CodeExampleStack>

</Figure>

When there is not enough space available, the `justify-items-center-safe` utility will align items to the start of the container instead of the center.

### Stretch

Use the `justify-items-stretch` utility to stretch items along their inline axis:

<Figure>

<Example>
  {
    <div className="grid grid-cols-1">
      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
      <div className="col-start-1 row-start-1 grid grid-cols-3 justify-items-stretch gap-4 font-mono text-sm leading-6 font-bold text-white">
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">01</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">02</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">03</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">04</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">05</div>
        <div className="flex h-14 items-center justify-center rounded-lg bg-blue-500">06</div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:justify-items-stretch] -->
<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>
```

</Figure>

### Responsive design

<ResponsiveDesign
  property="justify-items"
  defaultClass="grid justify-items-start"
  featuredClass="justify-items-center"
/>