グリッドオートフロー

Tailwind CSS version
v1.2.0+

グリッド内の要素の自動配置方法を制御するためのユーティリティ。

Class reference

Class
Properties
.grid-flow-rowgrid-auto-flow: row;
.grid-flow-colgrid-auto-flow: column;
.grid-flow-row-densegrid-auto-flow: row dense;
.grid-flow-col-densegrid-auto-flow: column dense;

使用方法

grid-flow-{keyword}ユーティリティを使用して、グリッドレイアウトで自動配置アルゴリズムがどのように機能するかを制御します。

1
2
3
4
5
6
7
8
9
<div class="grid grid-flow-col grid-cols-3 grid-rows-3 gap-4">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

レスポンシブ

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

<div class="grid grid-flow-col sm:grid-flow-row md:grid-flow-col-dense lg:grid-flow-row-dense xl:grid-flow-col ...">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

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

カスタマイズ

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

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

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

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

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

無効にする

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

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

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

Tailwind UI is now in early access!