justify-items

例

Start

justify-items-start ユーティリティを使用すると、グリッドアイテムをインライン軸の開始位置に揃えることができます。

<div class="grid justify-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

End

justify-items-end または justify-items-end-safe ユーティリティを使用すると、グリッドアイテムをインライン軸の終了位置に揃えることができます。

<div class="grid grid-flow-col justify-items-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="grid grid-flow-col justify-items-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

十分なスペースがない場合、justify-items-end-safe ユーティリティは、アイテムを終了位置ではなく、コンテナの開始位置に揃えます。

Center

justify-items-center または justify-items-center-safe ユーティリティを使用すると、グリッドアイテムをインライン軸の終了位置に揃えることができます。

<div class="grid grid-flow-col justify-items-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="grid grid-flow-col justify-items-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

十分なスペースがない場合、justify-items-center-safe ユーティリティは、アイテムを中央ではなく、コンテナの開始位置に揃えます。

Stretch

justify-items-stretch ユーティリティを使用すると、アイテムをインライン軸に沿って引き伸ばすことができます。

<div class="grid justify-items-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

レスポンシブデザイン

Prefixa justify-items ユーティリティを md: のようなブレークポイントバリアントで使用すると、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみになります。

<div class="grid justify-items-start md:justify-items-center ...">
  <!-- ... -->
</div>

variantsドキュメントでvariantsの使用方法について詳しく学んでください。