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

この記事について

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

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

グリッド自動行

暗黙的に作成されるグリッドの行のサイズを制御するためのユーティリティ。

Class	Properties
auto-rows-auto	grid-auto-rows: auto;
auto-rows-min	grid-auto-rows: min-content;
auto-rows-max	grid-auto-rows: max-content;
auto-rows-fr	grid-auto-rows: minmax(0, 1fr);

使い方

auto-rows-{size}ユーティリティーを使用して、暗黙的に作成されるグリッドの行のサイズを制御します。

<div class="grid grid-flow-row auto-rows-max">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

レスポンシブ

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

<div class="grid grid-flow-row auto-rows-max md:auto-rows-min">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

カスタマイズ

デフォルトでは、Tailwind には 4 つの汎用的なグリッドオートロウユーティリティが含まれています。これらをカスタマイズするには、tailwind.config.jsファイルのtheme.gridAutoRowsセクションで行います。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      gridAutoRows: {
        "2fr": "minmax(0, 2fr)",
      },
    },
  },
}

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

バリアント

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

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

例えば、この設定では hover と focus のバリアントも生成されます。

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       gridAutoRows: ['hover', 'focus'],
      }
    }
  }

無効化

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

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gridAutoRows: false,
    }
  }

---