🚥

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

2021/10/24に公開約2,300字

この記事について

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

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

Grid Auto Columns

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

Class Properties
auto-cols-auto grid-auto-columns: auto;
auto-cols-min grid-auto-columns: min-content;
auto-cols-max grid-auto-columns: max-content;
auto-cols-fr grid-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>

レスポンシブ

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

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

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

カスタマイズ

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

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

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

バリアント

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

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

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

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

無効化

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

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

Discussion

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