グリッドオートカラム

Tailwind CSS version
v1.9.0+

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

Class reference

Class
Properties
.auto-cols-autogrid-auto-columns: auto;
.auto-cols-mingrid-auto-columns: min-content;
.auto-cols-maxgrid-auto-columns: max-content;
.auto-cols-frgrid-auto-columns: minmax(0, 1fr);

使用方法

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

<div class="grid grid-flow-col auto-cols-max">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive

特定のブレークポイントでgrid-auto-columnsプロパティを制御するには、既存のgrid-auto-columnsユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:auto-cols-minを使用して、中程度の画面サイズ以上でのみauto-cols-minユーティリティを適用します。

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

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

Customizing

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

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

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

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!