grid-auto-rows

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

クラススタイル

クラス	スタイル
`auto-rows-auto`	`grid-auto-rows: auto;`
`auto-rows-min`	`grid-auto-rows: min-content;`
`auto-rows-max`	`grid-auto-rows: max-content;`
`auto-rows-fr`	`grid-auto-rows: minmax(0, 1fr);`
`auto-rows-(<custom-property>)`	`grid-auto-rows: var(<custom-property>);`
`auto-rows-[<value>]`	`grid-auto-rows: <value>;`

auto-rows-auto

grid-auto-rows: auto;

auto-rows-min

grid-auto-rows: min-content;

auto-rows-max

grid-auto-rows: max-content;

auto-rows-fr

grid-auto-rows: minmax(0, 1fr);

auto-rows-(<custom-property>)

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

auto-rows-[<value>]

grid-auto-rows: <value>;

例

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

<div class="grid grid-flow-row auto-rows-max">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

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

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

CSS変数には、以下も使用できます auto-rows-(<custom-property>) 構文

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

これは単なるショートハンドです auto-rows-[var(<custom-property>)] これは自動的に var() 関数を追加する省略形です。

プレフィックスa grid-auto-rows ユーティリティ md: のようなブレークポイントバリアントをプレフィックスとして使用して、ユーティリティを適用する対象をmedium 以上の画面サイズのみに限定します

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

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