【Tailwind和訳】FLEXBOX AND GRID/Grid Template Rows

この記事について

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

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

Grid Template Rows

グリッドレイアウトの行を指定するためのユーティリティーです。

Class	Properties
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3	grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4	grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5	grid-template-rows: repeat(5, minmax(0, 1fr));
grid-rows-6	grid-template-rows: repeat(6, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;

使い方

grid-rows-{n} ユーティリティーを使って、n 個の同じ大きさの行を持つグリッドを作成します。

<div class="h-64 grid grid-rows-3 grid-flow-col gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

レスポンシブ

特定のブレークポイントでグリッドの行を制御するには、既存の grid-template-rows ユーティリティに {screen}: というプレフィックスを追加します。例えば、md:grid-rows-6 とすると、grid-rows-6 ユーティリティを medium スクリーンサイズ以上でのみ適用することができます。

<div class="grid grid-rows-2 md:grid-rows-6 ...">
  <!-- ... -->
</div>

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

カスタマイズ

デフォルトでは、テイルウィンドには、最大 6 行の等幅の基本的なグリッドを作成するための grid-template-row ユーティリティが含まれています。これらを変更、追加、削除するには、テイルウィンドのテーマ設定の gridTemplateRows セクションをカスタマイズします。

ここでは、grid-template-rows の CSS プロパティに直接アクセスできるので、カスタム行の値を、一般的なものから複雑でサイト固有のものまで、好きなように設定することができます。

tailwind.config.js

  module.exports = {
    theme: {
      extend: {
        gridTemplateRows: {
          // Simple 8 row grid
+         '8': 'repeat(8, minmax(0, 1fr))',

          // Complex site-specific row configuration
+         'layout': '200px minmax(900px, 1fr) 100px',
        }
      }
    }
  }

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

バリアント

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

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

例えば、このコンフィグは hover と focus のバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+       gridTemplateRows: ['hover', 'focus'],
      }
    }
  }

無効化

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

tailwind.config.js

  module.exports = {
    corePlugins: {
      // ...
+     gridTemplateRows: false,
    }
  }