グリッドオートロー

Tailwind CSS version
v1.9.0+

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

Class reference

Class
Properties
.auto-rows-autogrid-auto-rows: auto;
.auto-rows-mingrid-auto-rows: min-content;
.auto-rows-maxgrid-auto-rows: max-content;
.auto-rows-frgrid-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を使用して、中程度の画面サイズ以上でのみ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のレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

カスタマイズ

デフォルトでは、Tailwindには4つの汎用grid-auto-rowsユーティリティが含まれています。 これらは、tailwind.config.jsファイルのtheme.gridAutoRowsセクションでカスタマイズできます。

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

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

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

デフォルトでonly responsive バリアントはgrid-auto-rows utilitiesのために作られます。

あなたはどのバリアントがgrid-auto-rows utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのgridAutoRowsプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

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

無効にする

もしgrid-auto-rows utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのgridAutoRows propertyfalseに設定することで完全に無効にすることができます。

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

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

Tailwind UI is now in early access!