place-content

place-content

用于控制内容在块轴上如何对齐和定位的工具。

Class Styles

place-content-center

place-content: center;

place-content-start

place-content: start;

place-content-end

place-content: 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>

Prefix a place-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.