place-content

用於同時控制內容如何對齊和排列的通用類別。

Class Styles

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;

範例（Examples）

使用 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 沿行內軸和區塊軸分配 grid 項目，使每個軸上的列和欄之間有相等的間距：

<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 沿行內軸和區塊軸分配 grid 項目，使每個軸上的列和欄周圍有相等的間距：

<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 分配 grid 項目，使其在行內軸和區塊軸上均勻分佈：

<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 將 grid 項目沿其 grid 區域在行內軸和區塊軸上伸展：

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

在 place-content 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。