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

この記事について

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

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

グリッド列の開始／終了

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

クラス	プロパティ
row-auto	grid-row: auto;
row-span-1	grid-row: span 1 / span 1;
row-span-2	grid-row: span 2 / span 2;
row-span-3	grid-row: span 3 / span 3;
row-span-4	grid-row: span 4 / span 4;
row-span-5	grid-row: span 5 / span 5;
row-span-6	grid-row: span 6 / span 6;
row-span-full	grid-row: 1 / -1;
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;
row-start-5	grid-row-start: 5;
row-start-6	grid-row-start: 6;
row-start-7	grid-row-start: 7;
row-start-auto	grid-row-start: auto;
row-end-1	grid-row-end: 1;
row-end-2	grid-row-end: 2;
row-end-3	grid-row-end: 3;
row-end-4	grid-row-end: 4;
row-end-5	grid-row-end: 5;
row-end-6	grid-row-end: 6;
row-end-7	grid-row-end: 7;
row-end-auto	grid-row-end: auto;

行をまたぐ

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

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

開始線と終了線

row-start-{n}およびrow-end-{n}ユーティリティーを使用すると、要素を n 番目のグリッドラインで開始または終了させることができます。また、これらはrow-span-{n}ユーティリティと組み合わせて、特定の数の行にまたがることができます。

CSS のグリッドラインは 0 ではなく 1 から始まるので、3 行グリッドのフルハイトの要素は 1 行目から始まり、4 行目で終わることになります。

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-start-2 row-span-2 ...">1</div>
  <div class="row-end-3 row-span-2 ...">2</div>
  <div class="row-start-1 row-end-4 ...">3</div>
</div>

レスポンシブ

特定のブレイクポイントにおける要素の行の配置を制御するには、既存の grid-row ユーティリティーに{screen}: というプレフィックスを追加します。例えば、md:row-span-3を使用すると、中程度のスクリーンサイズ以上でのみrow-span-3ユーティリティが適用されます。

<div class="grid grid-rows-3 ...">
  <div class="row-span-3 md:row-span-3 ..."></div>
</div>

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

カスタマイズ

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

grid-row shorthand property を直接制御する、より多くのrow-{value}ユーティリティを作成するには、Tailwind テーマコンフィグのgridRowセクションをカスタマイズします。

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

これは内部的には row-span-{n} ユーティリティに使用されています。これはgrid-row shorthand プロパティを直接設定するため、値の名前に直接spanという単語を含めることに注意してください。つまり、ここには好きな機能を持つエントリを自由に追加できるということです。そして、それは、spanユーティリティーである必要はありません。

新しいrow-start-{n}ユーティリティを追加するには、Tailwind テーマ設定のgridRowStartセクションを使用します。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridRowStart: {
+         '8': '8',
+         '9': '9',
+         '10': '10',
+         '11': '11',
+         '12': '12',
+         '13': '13',
        }
      }
    }
  }

新しいrow-end-{n}ユーティリティを追加するには、Tailwind テーマ設定のgridRowEndセクションを使用します。

 // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridRowEnd: {
+         '8': '8',
+         '9': '9',
+         '10': '10',
+         '11': '11',
+         '12': '12',
+         '13': '13',
        }
      }
    }
  }

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

バリアント

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

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

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
+     gridRow: ['responsive', 'hover'],
+     gridRowStart: ['responsive', 'hover'],
+     gridRowEnd: ['responsive', 'hover'],
    }
  }

variants の設定については、configuring variants documentationをご覧ください。

無効化

プロジェクトでグリッドローユーティリティを使用しない場合は、設定ファイルの corePlugins セクションで gridRow, gridRowStart, gridRowEnd プロパティを false に設定することで、完全に無効にすることができます。

 // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gridRow: false,
+     gridRowStart: false,
+     gridRowEnd: false,
    }
  }

---