zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

間隔

レイアウトコンテナ内の項目間の行・列の間隔を設定します。

グリッドやフレックスのコンテナに gap を指定して、項目の間隔を作ります。コンテナの内側の余白ではなく、トラックや項目の間に空間を追加します。

クラスと CSS の早見表

クラスの例期待される宣言
gap-4column-gap: 1rem; row-gap: 1rem;
gap-x-8column-gap: 2rem;
gap-y-2row-gap: 0.5rem;
gap-guttercolumn-gap: var(--zw-spacing-gutter); row-gap: var(--zw-spacing-gutter);
gap-[18px]column-gap: 18px; row-gap: 18px;
例の設定

この例では spacingUnit: "0.25rem"、reset: "none"、strict モード、空のブレークポイントを明示しています。数値の接尾辞に単位を掛けるため、gap-4 は 1rem の長さを直接出力します。Tailwind のスケールやテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、各プレビューから CSS を確認できます。

使い方の例

項目の間隔をそろえる

コンテナに gap-4 を指定します。各タイルの内側の余白は p-2 で設定します。

項目の間隔をそろえる
HTML
<div class="wind-demo grid grid-cols-3 gap-4">
  <div class="wind-demo-cell p-2">A</div>
  <div class="wind-demo-cell p-2">B</div>
  <div class="wind-demo-cell p-2">C</div>
  <div class="wind-demo-cell p-2">D</div>
  <div class="wind-demo-cell p-2">E</div>
  <div class="wind-demo-cell p-2">F</div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.gap-4 {
  column-gap: 1rem;
  row-gap: 1rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-3",
        "gap-4",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }

行と列の間隔を変える

gap-x-8 で列間を 2rem、gap-y-2 で行間を 0.5rem にします。

行と列の間隔を変える
HTML
<div class="wind-demo grid grid-cols-3 gap-x-8 gap-y-2">
  <div class="wind-demo-cell p-2">A</div>
  <div class="wind-demo-cell p-2">B</div>
  <div class="wind-demo-cell p-2">C</div>
  <div class="wind-demo-cell p-2">D</div>
  <div class="wind-demo-cell p-2">E</div>
  <div class="wind-demo-cell p-2">F</div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.gap-x-8 {
  column-gap: 2rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-3",
        "gap-x-8",
        "gap-y-2",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }

間隔に名前を付ける

tokens.spacing.gutter に 1.5rem を明示的に設定しています。

間隔に名前を付ける
HTML
<div class="wind-demo grid grid-cols-3 gap-gutter">
  <div class="wind-demo-cell p-2">A</div>
  <div class="wind-demo-cell p-2">B</div>
  <div class="wind-demo-cell p-2">C</div>
  <div class="wind-demo-cell p-2">D</div>
  <div class="wind-demo-cell p-2">E</div>
  <div class="wind-demo-cell p-2">F</div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-gutter: 1.5rem;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.gap-gutter {
  column-gap: var(--zw-spacing-gutter);
  row-gap: var(--zw-spacing-gutter);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "spacing": {
        "gutter": "1.5rem"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-3",
        "gap-gutter",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }

個別の長さを指定する

gap-[18px] は両方の gap プロパティに 18px を出力します。

個別の長さを指定する
HTML
<div class="wind-demo grid grid-cols-3 gap-[18px]">
  <div class="wind-demo-cell p-2">A</div>
  <div class="wind-demo-cell p-2">B</div>
  <div class="wind-demo-cell p-2">C</div>
  <div class="wind-demo-cell p-2">D</div>
  <div class="wind-demo-cell p-2">E</div>
  <div class="wind-demo-cell p-2">F</div>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.5 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-cell {
  background: #dce8f2;
  border: 1px solid #849bb3;
  min-width: 3rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.p-2 {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.gap-\[18px\] {
  column-gap: 18px;
  row-gap: 18px;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-cell": true
    },
    "safelist": {
      "docs-preview": [
        "grid",
        "grid-cols-3",
        "gap-[18px]",
        "p-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.5 system-ui, sans-serif; color: #203046; }
.wind-demo-cell { background: #dce8f2; border: 1px solid #849bb3; min-width: 3rem; text-align: center; }

任意値と名前付きの値

gap-0 は間隔をなくし、gap-px はトークンなしで 1px を指定します。それ以外の数値には tokens.spacingUnit が必要です。gutter の例のような名前付きの値は tokens.spacing で設定します。gap-[18px] などの任意値はスケール不要です。負の間隔は使えません。任意値の calc 内の空白はアンダースコアで表します。gap-x は column-gap、gap-y は row-gap を設定します。フレックスでは、項目間と行間への作用は flex-direction に従います。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

gap

フィールド値
カタログ識別子v1.gap
クラスパターンgap-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"column-gap","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則forbidden
競合グループと順位gap (11)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティcolumn-gap, row-gap

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
column-gapresolvednull
row-gapresolvednull

カタログの例

クラスの例期待される宣言
gap-0column-gap: 0; row-gap: 0

gap-x

フィールド値
カタログ識別子v1.gap-x
クラスパターンgap-x-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"column-gap","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則forbidden
競合グループと順位gap (11)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティcolumn-gap

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
column-gapresolvednull

カタログの例

クラスの例期待される宣言
gap-x-0column-gap: 0

gap-y

フィールド値
カタログ識別子v1.gap-y
クラスパターンgap-y-<suffix>
文法{"acceptedKinds":["keyword","token","scale","arbitrary"],"arbitraryProperty":"column-gap","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリspacing
負の値の規則forbidden
競合グループと順位gap (11)
並び順の順位1
セレクタの形ownElement
仕様バージョン1
出力するプロパティrow-gap

受け入れる値

種類接尾辞出力される値
keyword"0""0"
keyword"px""1px"

宣言テンプレート

プロパティ値の種類固定値
row-gapresolvednull

カタログの例

クラスの例期待される宣言
gap-y-0row-gap: 0

Revision History

作成更新