grid-auto-columns

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

クラススタイル

クラス	スタイル
`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-(<custom-property>)`	`grid-auto-columns: var(<custom-property>);`
`auto-cols-[<value>]`	`grid-auto-columns: <value>;`

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-(<custom-property>)

grid-auto-columns: var(<custom-property>);

auto-cols-[<value>]

grid-auto-columns: <value>;

例

暗黙的に作成されるグリッド列のサイズを制御するには、auto-cols-minやauto-cols-maxのようなユーティリティを使用します。

<div class="grid auto-cols-max grid-flow-col">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

以下を使用してください auto-cols-[<value>] シンタックスを設定するには暗黙的に作成されるグリッド列のサイズ完全にカスタムな値に基づいて

<div class="auto-cols-[minmax(0,2fr)] ...">
  <!-- ... -->
</div>

CSS変数の場合、以下も使用できます auto-cols-(<custom-property>) シンタックス

<div class="auto-cols-(--my-auto-cols) ...">
  <!-- ... -->
</div>

これは以下の省略形です auto-cols-[var(<custom-property>)] var()関数を自動的に追加します。

プレフィックスを grid-auto-columnsユーティリティに、md:のようなブレークポイントバリアントを付けると、ユーティリティが適用されるのはmedium 画面サイズ以上の場合のみになります

<div class="grid grid-flow-col auto-cols-max md:auto-cols-min ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。