ContextQMD
Back to Tailwindcss

Justify Self

src/docs/justify-self.mdx

latest10.5 KB
Original Source

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.";

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

Examples

Auto

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

<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 auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white"> <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">01</div> <div className="justify-self-auto rounded-lg bg-purple-500 p-4">02</div> <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">03</div> <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">04</div> <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">05</div> <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-400">06</div> </div> </div> } </Example>
html
<!-- [!code classes:justify-self-auto] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-auto ...">02</div>
  <!-- ... -->
</div>
</Figure>

Start

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

<Figure> <Example> { <div className="grid auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white"> <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">01</div> <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 size-14 justify-self-start rounded-lg bg-pink-500 p-4">02</div> </div> <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">03</div> <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">04</div> <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">05</div> <div className="rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">06</div> </div> } </Example>
html
<!-- [!code classes:justify-self-start] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-start ...">02</div>
  <!-- ... -->
</div>
</Figure>

Center

Use the justify-self-center or justify-self-center-safe utilities to align a grid item along the center of its 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-self-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="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-500">01</div> <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 size-14 justify-self-center rounded-lg bg-indigo-500 p-4">02</div> </div> <div className="rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-500">03</div> </div> </div> <div> <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> justify-self-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="rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">01</div> <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 size-14 justify-self-center-safe rounded-lg bg-sky-500 p-4">02</div> </div> <div className="rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-500">03</div> </div> </div> </div> } </Example> <CodeExampleStack>
html
<!-- [!code filename:justify-self-center] -->
<!-- [!code classes:justify-self-center] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-center ...">02</div>
  <!-- ... -->
</div>
html
<!-- [!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>
</CodeExampleStack> </Figure>

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:

<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-self-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="rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">01</div> <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 size-14 justify-self-end rounded-lg bg-blue-500 p-4">02</div> </div> <div className="rounded-lg bg-blue-300 p-4 dark:bg-blue-800 dark:text-blue-500">03</div> </div> </div> <div> <p className="text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400"> justify-self-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="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-500">01</div> <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 size-14 justify-self-end-safe rounded-lg bg-purple-500 p-4">02</div> </div> <div className="rounded-lg bg-purple-300 p-4 dark:bg-purple-800 dark:text-purple-500">03</div> </div> </div> </div> } </Example> <CodeExampleStack>
html
<!-- [!code filename:justify-self-end] -->
<!-- [!code classes:justify-self-end] -->
<div class="grid justify-items-stretch ...">
  <!-- ... -->
  <div class="justify-self-end ...">02</div>
  <!-- ... -->
</div>
html
<!-- [!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>
</CodeExampleStack> </Figure>

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:

<Figure> <Example> { <div className="grid auto-rows-fr grid-cols-3 justify-items-stretch gap-4 text-center font-mono text-sm leading-6 font-bold text-white"> <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 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400"> 01 </div> </div> <div className="bg-stripes-fuchsia grid w-full justify-self-stretch rounded-lg"> <div className="justify-self-stretch rounded-lg bg-fuchsia-500 p-4">02</div> </div> <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 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400"> 03 </div> </div> <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 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400"> 04 </div> </div> <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 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400"> 05 </div> </div> <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 size-14 rounded-lg bg-fuchsia-300 p-4 dark:bg-fuchsia-800 dark:text-fuchsia-400"> 06 </div> </div> </div> } </Example>
html
<!-- [!code classes:justify-self-stretch] -->
<div class="grid justify-items-start ...">
  <!-- ... -->
  <div class="justify-self-stretch ...">02</div>
  <!-- ... -->
</div>
</Figure>

Responsive design

<ResponsiveDesign property="justify-self" defaultClass="justify-self-start" featuredClass="justify-self-end" />