zfb
GitHub リポジトリ

検索したい単語を入力

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

グリッド

グリッドトラックを定義し、行・列の範囲と線に沿って項目を配置します。

grid-template で列と行を定義し、子要素は複数トラックをまたがせたり、開始線と終了線を指定して配置したりします。両方の軸を扱うレイアウトには grid が向いています。

クラスと CSS の早見表

クラスの例期待される宣言
grid-cols-3grid-template-columns: repeat(3,minmax(0,1fr));
grid-rows-2grid-template-rows: repeat(2,minmax(0,1fr));
col-span-2grid-column: span 2 / span 2;
col-start-2grid-column-start: 2;
col-end-4grid-column-end: 4;
row-span-2grid-row: span 2 / span 2;
row-start-2grid-row-start: 2;
row-end-4grid-row-end: 4;
grid-cols-[7rem_1fr]grid-template-columns: 7rem 1fr;
grid-rows-[auto_1fr]grid-template-rows: auto 1fr;
col-start-autogrid-column-start: auto;
row-end-autogrid-row-end: auto;
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

列と行を定義

grid-cols-3 は等幅の列を3本、grid-rows-2 は等高の行を2本作り、自動配置に使います。

列と行を定義
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Template utilities create explicit tracks for automatic placement.</p>
  <div class="wind-demo-frame grid grid-cols-3 grid-rows-2 gap-2">
    <div class="wind-demo-tile">1</div><div class="wind-demo-tile">2</div><div class="wind-demo-tile">3</div>
    <div class="wind-demo-tile">4</div><div class="wind-demo-tile">5</div><div class="wind-demo-tile">6</div>
  </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.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-3 {
  grid-template-columns: repeat(3,minmax(0,1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2,minmax(0,1fr));
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "gap-2",
        "grid",
        "grid-cols-3",
        "grid-rows-2"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

グリッド線に沿って配置

col-span-2 と row-span-2 は複数トラックをまたぎ、start/end は番号付きの線に合わせます。auto にすると自動配置に戻ります。

グリッド線に沿って配置
HTML
<div class="wind-demo">
  <p class="wind-demo-note">Column and row lines place or span items across the explicit tracks.</p>
  <div class="wind-demo-frame grid grid-cols-4 grid-rows-4 gap-2">
    <div class="wind-demo-tile col-span-2 row-start-1 row-end-2">Span two columns</div>
    <div class="wind-demo-tile wind-demo-alt col-start-3 col-end-5 row-start-1 row-span-2">Start/end lines; span two rows</div>
    <div class="wind-demo-tile col-start-1 col-end-3 row-start-2 row-end-4">Rows 2–4</div>
    <div class="wind-demo-tile wind-demo-alt col-start-3 col-end-5 row-start-3 row-end-4">Placed at line 3</div>
    <div class="wind-demo-tile col-start-2 col-end-4 row-start-4 row-end-5">Column lines 2–4</div>
    <div class="wind-demo-tile col-start-auto row-end-auto">Auto placement</div>
  </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.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.grid {
  display: grid;
}
.col-end-3 {
  grid-column-end: 3;
}
.col-end-4 {
  grid-column-end: 4;
}
.col-end-5 {
  grid-column-end: 5;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.col-start-3 {
  grid-column-start: 3;
}
.col-start-auto {
  grid-column-start: auto;
}
.grid-cols-4 {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.grid-rows-4 {
  grid-template-rows: repeat(4,minmax(0,1fr));
}
.row-end-2 {
  grid-row-end: 2;
}
.row-end-4 {
  grid-row-end: 4;
}
.row-end-5 {
  grid-row-end: 5;
}
.row-end-auto {
  grid-row-end: auto;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-start-1 {
  grid-row-start: 1;
}
.row-start-2 {
  grid-row-start: 2;
}
.row-start-3 {
  grid-row-start: 3;
}
.row-start-4 {
  grid-row-start: 4;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "col-end-3",
        "col-end-4",
        "col-end-5",
        "col-span-2",
        "col-start-1",
        "col-start-2",
        "col-start-3",
        "col-start-auto",
        "gap-2",
        "grid",
        "grid-cols-4",
        "grid-rows-4",
        "row-end-2",
        "row-end-4",
        "row-end-5",
        "row-end-auto",
        "row-span-2",
        "row-start-1",
        "row-start-2",
        "row-start-3",
        "row-start-4"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

固定幅と可変幅を組み合わせる

任意値で 7rem の列と可変列、auto の行と可変行を定義します。

固定幅と可変幅を組み合わせる
HTML
<div class="wind-demo">
  <div class="wind-demo-note">An arbitrary track list is written with underscores for spaces.</div>
  <div class="wind-demo-frame grid grid-cols-[7rem_1fr] grid-rows-[auto_1fr] gap-2">
    <div class="wind-demo-tile">Fixed track</div><div class="wind-demo-tile">Flexible track</div>
    <div class="wind-demo-tile">Second row</div><div class="wind-demo-tile">Remaining width</div>
  </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.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.grid {
  display: grid;
}
.grid-cols-\[7rem_1fr\] {
  grid-template-columns: 7rem 1fr;
}
.grid-rows-\[auto_1fr\] {
  grid-template-rows: auto 1fr;
}
.gap-2 {
  column-gap: 0.5rem;
  row-gap: 0.5rem;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "gap-2",
        "grid",
        "grid-cols-[7rem_1fr]",
        "grid-rows-[auto_1fr]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

任意値と名前付きの値

grid-cols-N と grid-rows-N は 1〜12 の整数を受け取り、none と subgrid も使えます。col-span-N と row-span-N は 1〜12、start/end の線番号は 1〜13 と auto に対応します。span-full は 1 / -1 です。テンプレートには CSS の任意トラックリストも指定でき、grid-cols-[7rem_1fr] のように空白をアンダースコアで表します。

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

カタログの詳細

col-end

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
col-end-autogrid-column-end: auto

col-span

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

受け入れる値

種類接尾辞出力される値
keyword"full""1 / -1"

宣言テンプレート

プロパティ値の種類固定値
grid-columnresolvednull

カタログの例

クラスの例期待される宣言
col-span-fullgrid-column: 1 / -1

col-start

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
col-start-autogrid-column-start: auto

grid-cols

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

受け入れる値

種類接尾辞出力される値
keyword"none""none"
keyword"subgrid""subgrid"

宣言テンプレート

プロパティ値の種類固定値
grid-template-columnsresolvednull

カタログの例

クラスの例期待される宣言
grid-cols-nonegrid-template-columns: none

grid-rows

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

受け入れる値

種類接尾辞出力される値
keyword"none""none"
keyword"subgrid""subgrid"

宣言テンプレート

プロパティ値の種類固定値
grid-template-rowsresolvednull

カタログの例

クラスの例期待される宣言
grid-rows-nonegrid-template-rows: none

row-end

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
row-end-autogrid-row-end: auto

row-span

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

受け入れる値

種類接尾辞出力される値
keyword"full""1 / -1"

宣言テンプレート

プロパティ値の種類固定値
grid-rowresolvednull

カタログの例

クラスの例期待される宣言
row-span-fullgrid-row: 1 / -1

row-start

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

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
row-start-autogrid-row-start: auto

Revision History

作成更新