place-content

place-content

用于同时控制内容在块轴和内联轴上对齐方式的实用工具。

类名样式

place-content-center

place-content: center;

place-content-center-safe

place-content: safe center;

place-content-start

place-content: start;

place-content-end

place-content: end;

place-content-end-safe

place-content: safe end;

place-content-between

place-content: space-between;

place-content-around

place-content: space-around;

place-content-evenly

place-content: space-evenly;

place-content-baseline

place-content: baseline;

place-content-stretch

place-content: stretch;

示例

使用 place-content-center 将项目打包在块轴的中心

<div class="grid h-48 grid-cols-2 place-content-center gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

使用 place-content-start 将项目打包在块轴的起始位置

<div class="grid h-48 grid-cols-2 place-content-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

使用 place-content-end 将项目打包在块轴的末尾位置

<div class="grid h-48 grid-cols-2 place-content-end gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

使用 place-content-between 沿块轴分布网格项目，使块轴上每行之间都有相等的空间

<div class="grid h-48 grid-cols-2 place-content-between gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

使用 place-content-around 分布网格项目，使块轴上每行周围都有相等的空间

<div class="grid h-48 grid-cols-2 place-content-around gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

使用 place-content-evenly 分布网格项目，使它们在块轴上均匀分布

<div class="grid h-48 grid-cols-2 place-content-evenly gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

使用 place-content-stretch 沿块轴拉伸网格项目以填充其网格区域

<div class="grid h-48 grid-cols-2 place-content-stretch gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

前缀a place-content 实用工具与断点变体（如 md:）一起使用，仅在中等屏幕尺寸及以上时应用该实用工具

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

了解有关在变体文档中使用变体的更多信息。