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: のようなブレークポイントバリアントで、ユーティリティを適用するのはmedium medium以上の画面サイズ

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

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。