Log in Get started

Back to Tailwindcss

Place Items

src/docs/place-items.mdx

latest9.4 KB

Original Source

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

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

Examples

Start

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

<Figure> <Example> { <div className="font-mono text-sm leading-6 font-bold text-white"> <div className="grid h-56 grid-cols-3 gap-4"> <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 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4"> 01 </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 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-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 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4"> 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 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4"> 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 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4"> 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 flex size-14 items-center justify-center place-self-start rounded-lg bg-cyan-500 p-4"> 06 </div> </div> </div> </div> } </Example>

html

<!-- [!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>

</Figure>

End

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

<Figure> <Example> { <div className="font-mono text-sm leading-6 font-bold text-white"> <div className="grid h-56 grid-cols-3 gap-4"> <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 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4"> 01 </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 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-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 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4"> 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 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4"> 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 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4"> 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 flex size-14 items-center justify-center place-self-end rounded-lg bg-violet-500 p-4"> 06 </div> </div> </div> </div> } </Example>

html

<!-- [!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>

</Figure>

Center

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

<Figure> <Example> { <div className="font-mono text-sm leading-6 font-bold text-white"> <div className="grid h-56 grid-cols-3 gap-4"> <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 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4"> 01 </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 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-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 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4"> 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 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4"> 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 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4"> 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 flex size-14 items-center justify-center place-self-center rounded-lg bg-pink-500 p-4"> 06 </div> </div> </div> </div> } </Example>

html

<!-- [!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>

</Figure>

Stretch

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

<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 h-56 grid-cols-3 gap-4 font-mono text-sm leading-6 font-bold text-white"> <div className="grid place-items-stretch"> <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">01</div> </div> <div className="grid place-items-stretch"> <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">02</div> </div> <div className="grid place-items-stretch"> <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">03</div> </div> <div className="grid place-items-stretch"> <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">04</div> </div> <div className="grid place-items-stretch"> <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">05</div> </div> <div className="grid place-items-stretch"> <div className="flex items-center justify-center rounded-lg bg-blue-500 p-4">06</div> </div> </div> </div> } </Example>

html

<!-- [!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>

</Figure>

Responsive design

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