🚥

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

2021/10/24に公開約1,900字

この記事について

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

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

Grid Auto Flow

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

Class Properties
grid-flow-row grid-auto-flow: row;
grid-flow-col grid-auto-flow: column;
grid-flow-row-dense grid-auto-flow: row dense;
grid-flow-col-dense grid-auto-flow: column dense;

使い方

grid-flow-{keyword} ユーティリティを使って、グリッドレイアウトの自動配置アルゴリズムの動作を制御します。

<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 md:grid-flow-col ...">
  <div>1</div>
  <!-- ... -->
  <div>9</div>
</div>

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

カスタマイズ

バリアント

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

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

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

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

無効化

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

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

Discussion

ログインするとコメントできます