gap

例

基本的な例

グリッドおよびFlexboxレイアウトの行と列の間の間隔を変更するには、gap-<number>ユーティリティ（gap-2やgap-4など）を使用します。

<div class="grid grid-cols-2 gap-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
</div>

行と列の間隔を個別に変更する

列と行の間隔を個別に変更するには、gap-x-<number>またはgap-y-<number>ユーティリティ（gap-x-8やgap-y-4など）を使用します。

<div class="grid grid-cols-3 gap-x-8 gap-y-4">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

カスタム値の使用

次のようなユーティリティを使用します。 gap-[<value>]、gap-x-[<value>]、およびgap-y-[<value>]を設定するには、gap完全にカスタムの値に基づいています

<div class="gap-[10vw] ...">
  <!-- ... -->
</div>

CSS変数には、次のものも使用できます。 gap-(<custom-property>) 構文

<div class="gap-(--my-gap) ...">
  <!-- ... -->
</div>

これは、次の省略形です。 gap-[var(<custom-property>)] var()関数を自動的に追加します。

レスポンシブデザイン

プレフィックス gap、column-gap、およびrow-gapユーティリティ md:のようなブレークポイントバリアントを付けてプレフィックスを付けると、ユーティリティを適用するのはmedium 画面サイズ以上

<div class="grid gap-4 md:gap-6 ...">
  <!-- ... -->
</div>

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