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.