Aller au contenu

Justify self

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-self"; export const description = "Utilities for controlling how an individual grid item is aligned along its inline axis.";

Examples

Auto

Use the justify-self-auto utility to align an item based on the value of the grid's justify-items property:

{
01
02
03
04
05
06
} 
<!-- [!code classes:justify-self-auto] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
</div>

Start

Use the justify-self-start utility to align a grid item to the start of its inline axis:

{
01
02
03
04
05
06
} 
<!-- [!code classes:justify-self-start] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
</div>

Center

Use the justify-self-center or justify-self-center-safe utilities to align a grid item along the center of its inline axis:

{

justify-self-center

01
02
03

justify-self-center-safe

01
02
03
} 
<!-- [!code filename:justify-self-center] -->
<!-- [!code classes:justify-self-center] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
</div>

<!-- [!code filename:justify-self-center-safe] -->
<!-- [!code classes:justify-self-center-safe] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center-safe ...">02</div>
  <!-- ... -->
</div>

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

End

Use the justify-self-end or justify-self-end-safe utilities to align a grid item to the end of its inline axis:

{

justify-self-end

01
02
03

justify-self-end-safe

01
02
03
} 
<!-- [!code filename:justify-self-end] -->
<!-- [!code classes:justify-self-end] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
</div>

<!-- [!code filename:justify-self-end-safe] -->
<!-- [!code classes:justify-self-end-safe] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end-safe ...">02</div>
  <!-- ... -->
</div>

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

Stretch

Use the justify-self-stretch utility to stretch a grid item to fill the grid area on its inline axis:

{
01
02
03
04
05
06
} 
<!-- [!code classes:justify-self-stretch] -->
<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
</div>

Responsive design