Place Items 放置项目
控制物品如何同时对齐和对齐的实用工具。
| Class | Properties |
|---|
基本用法
Start 开始
使用 place-items-start 将网格项放置在两个轴上的网格区域的起始位置：
01
02
03
04
05
06
html
<div class="grid grid-cols-3 gap-4 place-items-start ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>End 末尾
使用 place-items-end 将网格项放置在两个轴上的网格区域的结束位置：
01
02
03
04
05
06
html
<div class="grid grid-cols-3 gap-4 place-items-end h-56 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>Center 居中
使用 place-items-center 将网格项放置在两个轴上的网格区域的中心位置：
01
02
03
04
05
06
html
<div class="grid grid-cols-3 gap-4 place-items-center h-56 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>Stretch 伸展
使用 place-items-stretch 来沿着网格区域在两个轴上拉伸项目：
01
02
03
04
05
06
html
<div class="grid grid-cols-3 gap-4 place-items-stretch h-56 ...">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
</div>有条件地应用
悬停，焦点和其他状态
Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:place-items-center 只在悬停时应用 place-items-center 实用程序。
html
<div class="grid place-items-start hover:place-items-center">
<!-- ... -->
</div>要查看所有可用状态修饰符的完整列表，请查看悬停，焦点和其他状态文档。
断点和媒体查询
您还可以使用变体修饰符来定位媒体查询，如响应式断点、暗模式、偏好减少动作等。例如，使用 md:place-items-center 仅在中等屏幕尺寸及以上应用 place-items-center 实用程序。
html
<div class="grid place-items-start md:place-items-center">
<!-- ... -->
</div>