グリッドロー スタート/エンド

Tailwind CSS version
v1.2.0+

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

Class reference

Class
Properties
.row-autogrid-row: auto;
.row-span-1grid-row: span 1 / span 1;
.row-span-2grid-row: span 2 / span 2;
.row-span-3grid-row: span 3 / span 3;
.row-span-4grid-row: span 4 / span 4;
.row-span-5grid-row: span 5 / span 5;
.row-span-6grid-row: span 6 / span 6;
.row-span-fullgrid-row: 1 / -1;
.row-start-1grid-row-start: 1;
.row-start-2grid-row-start: 2;
.row-start-3grid-row-start: 3;
.row-start-4grid-row-start: 4;
.row-start-5grid-row-start: 5;
.row-start-6grid-row-start: 6;
.row-start-7grid-row-start: 7;
.row-start-autogrid-row-start: auto;
.row-end-1grid-row-end: 1;
.row-end-2grid-row-end: 2;
.row-end-3grid-row-end: 3;
.row-end-4grid-row-end: 4;
.row-end-5grid-row-end: 5;
.row-end-6grid-row-end: 6;
.row-end-7grid-row-end: 7;
.row-end-autogrid-row-end: auto;

Spanning rows

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

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

Starting and ending lines

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

CSSグリッドラインは0ではなく1で始まるため、3行グリッドのfull-height要素はライン1で始まり、ライン4で終わることに注意してください。

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

レスポンシブ

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

<div class="grid grid-rows-3 ...">
  <div class="row-span-3 sm:row-span-1 md:row-span-2 lg:row-span-3 xl:row-span-1 ..."></div>
</div>

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

カスタマイズ

デフォルトでは、Tailwindには最大6つの明示的な行を持つグリッドを操作するためのgrid-rowユーティリティが含まれています。 Tailwindテーマ構成のgridRow, gridRowStartおよびgridRowEndセクションをカスタマイズして、これらを変更、追加、または削除します。

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

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

私達はこれをrow-span-{n}ユーティリティの内部で使用します。 これはgrid-row省略形プロパティを直接構成するため、値名に直接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',
        }
      }
    }
  }

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

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

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

tailwind.config.jsファイルのvariantsセクションでgridRow,gridRowStartおよびgridRowEndプロパティを変更することにより、grid-rowユーティリティ用に生成されるバリアントを制御できます。

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

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

無効にする

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

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

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

Tailwind UI is now in early access!