place-items

place-items

用于同时控制项目的对齐和排列方式的工具。

类样式

类	样式
`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;`

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)

使用 place-items-start 将网格项放置在其网格区域的起始位置，沿两个轴排列：

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

<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)

使用 place-items-end 将网格项放置在其网格区域两条轴的末端：

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

<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)

使用 place-items-center 将网格项在两个轴上放置在其网格区域的中央：

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

<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)

使用 place-items-stretch 在两个轴上沿网格区域拉伸项目：

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

<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)

在 place-items 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<div class="grid place-items-start md:place-items-center ...">  <!-- ... --></div>

请参阅变体文档详细了解如何使用变体。