ギャップ

Tailwind CSS version
v1.2.0+

グリッドの行と列の間のガターを制御するためのユーティリティ。

Class reference

Class
Properties
.gap-0gap: 0;
.gap-1gap: 0.25rem;
.gap-2gap: 0.5rem;
.gap-3gap: 0.75rem;
.gap-4gap: 1rem;
.gap-5gap: 1.25rem;
.gap-6gap: 1.5rem;
.gap-8gap: 2rem;
.gap-10gap: 2.5rem;
.gap-12gap: 3rem;
.gap-16gap: 4rem;
.gap-20gap: 5rem;
.gap-24gap: 6rem;
.gap-32gap: 8rem;
.gap-40gap: 10rem;
.gap-48gap: 12rem;
.gap-56gap: 14rem;
.gap-64gap: 16rem;
.gap-pxgap: 1px;
.gap-x-0column-gap: 0;
.gap-x-1column-gap: 0.25rem;
.gap-x-2column-gap: 0.5rem;
.gap-x-3column-gap: 0.75rem;
.gap-x-4column-gap: 1rem;
.gap-x-5column-gap: 1.25rem;
.gap-x-6column-gap: 1.5rem;
.gap-x-8column-gap: 2rem;
.gap-x-10column-gap: 2.5rem;
.gap-x-12column-gap: 3rem;
.gap-x-16column-gap: 4rem;
.gap-x-20column-gap: 5rem;
.gap-x-24column-gap: 6rem;
.gap-x-32column-gap: 8rem;
.gap-x-40column-gap: 10rem;
.gap-x-48column-gap: 12rem;
.gap-x-56column-gap: 14rem;
.gap-x-64column-gap: 16rem;
.gap-x-pxcolumn-gap: 1px;
.gap-y-0row-gap: 0;
.gap-y-1row-gap: 0.25rem;
.gap-y-2row-gap: 0.5rem;
.gap-y-3row-gap: 0.75rem;
.gap-y-4row-gap: 1rem;
.gap-y-5row-gap: 1.25rem;
.gap-y-6row-gap: 1.5rem;
.gap-y-8row-gap: 2rem;
.gap-y-10row-gap: 2.5rem;
.gap-y-12row-gap: 3rem;
.gap-y-16row-gap: 4rem;
.gap-y-20row-gap: 5rem;
.gap-y-24row-gap: 6rem;
.gap-y-32row-gap: 8rem;
.gap-y-40row-gap: 10rem;
.gap-y-48row-gap: 12rem;
.gap-y-56row-gap: 14rem;
.gap-y-64row-gap: 16rem;
.gap-y-pxrow-gap: 1px;

Gap

.gap-{size}を使用して、グリッドレイアウトのガターサイズを変更します。

gap-1
gap-2
gap-6
<div class="grid gap-1 grid-cols-2">
  <!-- ... -->
</div>

<div class="grid gap-2 grid-cols-2">
  <!-- ... -->
</div>

<div class="grid gap-6 grid-cols-2">
  <!-- ... -->
</div>

Row Gap

.gap-y-{size}を使用して、グリッドレイアウトの行間のガターサイズを変更します。

gap-y-1
gap-y-2
gap-y-6
<div class="grid gap-y-1 grid-cols-2">
  <!-- ... -->
</div>

<div class="grid gap-y-2 grid-cols-2">
  <!-- ... -->
</div>

<div class="grid gap-y-6 grid-cols-2">
  <!-- ... -->
</div>

Tailwind v1.7.0より前は、これらのユーティリティの名前は.row-gap-{size}でした。より詳しくはupcoming changes guideをご覧ください。

Column Gap

.gap-x-{size}を使用して、グリッドレイアウトの列間のガターサイズを変更します。

gap-x-1
gap-x-2
gap-x-6
<div class="grid gap-x-1 grid-cols-2">
  <!-- ... -->
</div>

<div class="grid gap-x-2 grid-cols-2">
  <!-- ... -->
</div>

<div class="grid gap-x-6 grid-cols-2">
  <!-- ... -->
</div>

Tailwind v1.7.0より前は、これらのユーティリティの名前は.col-gap-{size}でした。 より詳しくはupcoming changes guideをご覧ください。

レスポンシブ

特定のブレークポイントでギャップを制御するには、既存のギャップユーティリティに {screen}:プレフィックスを追加します。 たとえば、md:gap-6を使用して、中程度の画面サイズ以上でのみgap-6ユーティリティを適用します。

<div class="grid gap-4 sm:gap-6 md:gap-8 lg:gap-12 xl:gap-16 ...">
  <!-- ... -->
</div>

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

カスタマイズ

Gap values

デフォルトでは、Tailwindのギャップスケールは構成済みのspacing scaleと一致します。

tailwind.config.jsファイルのtheme.spacingまたは theme.extend.spacingセクションでグローバル間隔スケールをカスタマイズできます。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        spacing: {
+         '72': '18rem',
+         '84': '21rem',
+         '96': '24rem',
        }
      }
    }
  }

ギャップスケールを個別にカスタマイズするには、Tailwindテーマ設定のgapセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gap: {
+         '11': '2.75rem',
+         '13': '3.25rem',
        }
      }
    }
  }

デフォルトテーマのカスタマイズについてはtheme customization documentationをご覧ください。

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはgap utilitiesのために作られます。

あなたはどのバリアントがgap utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのgapプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     gap: ['responsive'],
+     gap: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしgap utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのgap propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gap: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!