🚥

【Tailwind和訳】FLEXBOX AND GRID/Grid Column Start / End

2021/10/24に公開約6,400字

この記事について

この記事は、FLEXBOX AND GRID/Grid Column Start / Endの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Grid Column Start / End

tailwindcss-flexbox-and-grid-grid-column-stat-end

グリッドの列間で要素のサイズと配置をコントロールするユーティリティー。

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

スパン列

col-span-{n} ユーティリティーを使って、要素が n 列にまたがるようにします。

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

開始行と終了行

col-start-{n} および col-end-{n} ユーティリティを使用すると、要素の開始または終了を nth (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 ...">1</div>
  <div class="col-start-1 col-end-3 ...">2</div>
  <div class="col-end-7 col-span-2 ...">3</div>
  <div class="col-start-1 col-end-7 ...">4</div>
</div>

レスポンシブ

特定のブレイクポイントにおける要素のカラム配置を制御するには、既存の grid-column ユーティリティーに {screen}: というプレフィックスを追加します。例えば、md:col-span-6 を使えば、medium スクリーンサイズ以上でのみ col-span-6 ユーティリティを適用できます。

<div class="col-span-2 md:col-span-6"></div>

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

カスタマイズ

デフォルトでは、テイルウィンドには 12 列までのグリッドを扱うための grid-column ユーティリティが含まれています。これらを変更、追加、削除するには、Tailwind のテーマ設定の gridColumngridColumnStartgridColumnEnd セクションをカスタマイズします。

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',
        }
      }
    }
  }

デフォルトテーマのカスタマイズについては、テーマのカスタマイズに関するドキュメントをご覧ください。

バリアント

デフォルトでは、grid-column ユーティリティにはレスポンシブバリアントのみが生成されます。

tailwind.config.js ファイルの variants セクションにある gridColumngridColumnStartgridColumnEnd プロパティを変更することで、グリッドコラムユーティリティー用に生成されるバリアントをコントロールすることができます。

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

バリアントの設定については、バリアント設定のドキュメントを参照してください。

無効化

プロジェクトで grid-column ユーティリティを使用しない場合は、設定ファイルの corePlugins セクションで gridColumngridColumnStartgridColumnEnd プロパティを false に設定することで、これらを完全に無効にすることができます。

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

Discussion

ログインするとコメントできます