グリッドカラム スタート/エンド

Tailwind CSS version
v1.2.0+

要素のサイズとグリッド列全体への配置方法を制御するためのユーティリティ。

Class reference

Class
Properties
.col-autogrid-column: auto;
.col-span-1grid-column: span 1 / span 1;
.col-span-2grid-column: span 2 / span 2;
.col-span-3grid-column: span 3 / span 3;
.col-span-4grid-column: span 4 / span 4;
.col-span-5grid-column: span 5 / span 5;
.col-span-6grid-column: span 6 / span 6;
.col-span-7grid-column: span 7 / span 7;
.col-span-8grid-column: span 8 / span 8;
.col-span-9grid-column: span 9 / span 9;
.col-span-10grid-column: span 10 / span 10;
.col-span-11grid-column: span 11 / span 11;
.col-span-12grid-column: span 12 / span 12;
.col-span-fullgrid-column: 1 / -1;
.col-start-1grid-column-start: 1;
.col-start-2grid-column-start: 2;
.col-start-3grid-column-start: 3;
.col-start-4grid-column-start: 4;
.col-start-5grid-column-start: 5;
.col-start-6grid-column-start: 6;
.col-start-7grid-column-start: 7;
.col-start-8grid-column-start: 8;
.col-start-9grid-column-start: 9;
.col-start-10grid-column-start: 10;
.col-start-11grid-column-start: 11;
.col-start-12grid-column-start: 12;
.col-start-13grid-column-start: 13;
.col-start-autogrid-column-start: auto;
.col-end-1grid-column-end: 1;
.col-end-2grid-column-end: 2;
.col-end-3grid-column-end: 3;
.col-end-4grid-column-end: 4;
.col-end-5grid-column-end: 5;
.col-end-6grid-column-end: 6;
.col-end-7grid-column-end: 7;
.col-end-8grid-column-end: 8;
.col-end-9grid-column-end: 9;
.col-end-10grid-column-end: 10;
.col-end-11grid-column-end: 11;
.col-end-12grid-column-end: 12;
.col-end-13grid-column-end: 13;
.col-end-autogrid-column-end: auto;

Spanning columns

col-span-{n}ユーティリティを使用して、要素をn列に広げます。

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-3 ..."></div>
  <div class="col-span-2 ..."></div>
  <div class="col-span-1 ..."></div>
  <div class="col-span-1 ..."></div>
  <div class="col-span-2 ..."></div>
</div>

Starting and ending lines

col-start-{n}およびcol-end-{n}ユーティリティを使用して、要素をn行目グリッド線で開始または終了します。

これらをcol-span-{n}ユーティリティと組み合わせて、特定の数の列にまたがることもできます。

CSSグリッドラインは0ではなく1で始まるため、6列グリッドの全幅要素は1行目で始まり、7行目で終わることに注意してください。

<div class="grid grid-cols-6 gap-4">
  <div class="col-start-2 col-span-4 ..."></div>
  <div class="col-start-1 col-end-3 ..."></div>
  <div class="col-end-7 col-span-2 ..."></div>
  <div class="col-start-1 col-end-7 ..."></div>
</div>

レスポンシブ

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

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

<div class="grid grid-cols-6 gap-4">
  <div class="col-span-6 sm:col-span-4 md:col-span-3 lg:col-span-5 xl:col-span-2..."></div>
  <div class="col-span-3 sm:col-span-2 md:col-span-3 lg:col-span-1 xl:col-span-4..."></div>
  <div class="col-span-3 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-2..."></div>
  <div class="col-span-6 sm:col-span-4 md:col-span-3 lg:col-span-2 xl:col-span-4..."></div>
</div>

カスタマイズ

デフォルトでは、Tailwindには、最大12列のグリッドを操作するためのグリッド列ユーティリティが含まれています。

TailwindテーマコンフィグのgridColumn,gridColumnStartおよびgridColumnEndセクションをカスタマイズして、これらを変更、追加、または削除します。

grid-column短縮プロパティを直接制御するcol-{value}ユーティリティをさらに作成するには、Tailwindテーマ設定のgridColumnセクションをカスタマイズします。

grid-column短縮プロパティを直接制御するcol-{value}ユーティリティをさらに作成するには、TailwindテーマコンフィグのgridColumnセクションをカスタマイズします。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridColumn: {
+         'span-16': 'span 16 / span 16',
        }
      }
    }
  }

これは、内部でcol-span-{n}ユーティリティに使用します。

これはgrid-column省略形プロパティを直接構成するため、 値名に直接spanという単語を含めますが、クラス名に自動的に組み込まれることはありません。 つまり、ここでやりたいことを何でも実行するエントリを自由に追加できます。エントリはspanユーティリティである必要はありません。

新しいcol-start-{n}ユーティリティを追加するには、TailwindテーマコンフィグのgridColumnStartセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridColumnStart: {
+         '13': '13',
+         '14': '14',
+         '15': '15',
+         '16': '16',
+         '17': '17',
        }
      }
    }
  }

新しいcol-end-{n}ユーティリティを追加するには、TailwindテーマコンフィグのgridColumnEndセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridColumnEnd: {
+         '13': '13',
+         '14': '14',
+         '15': '15',
+         '16': '16',
+         '17': '17',
        }
      }
    }
  }

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

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

デフォルトでは、グリッド列ユーティリティに対してレスポンシブバリアントのみが生成されます。

tailwind.config.jsファイルのvariantsセクションのgridColumn,gridColumnStartおよびgridColumnEndプロパティを変更することにより、グリッド列ユーティリティ用に生成されるバリアントを制御できます。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
+     gridColumn: ['responsive', 'hover'],
+     gridColumnStart: ['responsive', 'hover'],
+     gridColumnEnd: ['responsive', 'hover'],
    }
  }

バリアントのコンフィグ詳細についてはconfiguring variants documentationをご覧ください。

無効にする

もしgrid-column utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのgridColumn, gridColumnStart and gridColumnEnd propertiesfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gridColumn: false,
+     gridColumnStart: false,
+     gridColumnEnd: false,
    }
  }

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

Tailwind UI is now in early access!