Aller au contenu

Place items

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 = "place-items"; export const description = "Utilities for controlling how items are justified and aligned at the same time.";

Examples

Start

Use place-items-start to place grid items on the start of their grid areas on both axes:

{
01
02
03
04
05
06
} 
<!-- [!code classes:place-items-start] -->
<div class="grid grid-cols-3 place-items-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

End

Use place-items-end to place grid items on the end of their grid areas on both axes:

{
01
02
03
04
05
06
} 
<!-- [!code classes:place-items-end] -->
<div class="grid h-56 grid-cols-3 place-items-end gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Center

Use place-items-center to place grid items on the center of their grid areas on both axes:

{
01
02
03
04
05
06
} 
<!-- [!code classes:place-items-center] -->
<div class="grid h-56 grid-cols-3 place-items-center gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Stretch

Use place-items-stretch to stretch items along their grid areas on both axes:

{
01
02
03
04
05
06
} 
<!-- [!code classes:place-items-stretch] -->
<div class="grid h-56 grid-cols-3 place-items-stretch gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

Responsive design