【CSS Modules】grid-auto-rowsプロパティの使い方

grid-auto-rowsプロパティは、CSS Gridレイアウトにおいて、明示的に定義されていない行トラックのサイズを制御するプロパティです。このプロパティは、グリッドコンテナに適用されます。

CSS Gridでは、grid-template-rowsプロパティを用いて、あらかじめ行の数やそのサイズを定義できます。しかし、グリッドコンテナ内に配置するアイテムが、grid-template-rowsで指定された行の範囲を超えてさらに下側に広がる場合や、明示的に位置が指定されていないアイテムが配置される際に、グリッドは自動的に新しい行を生成することがあります。これらの自動的に生成される行を「暗黙的なグリッド行」と呼びます。

grid-auto-rowsプロパティは、この暗黙的なグリッド行がどのようなサイズになるかを定義します。例えば、grid-auto-rows: auto;と設定すると、グリッドアイテムのコンテンツ量に応じて行の高さが自動的に調整されます。grid-auto-rows: 100px;のように固定値を指定すると、生成されるすべての暗黙的な行は100ピクセルの高さになります。

また、grid-auto-rows: min-content;を指定するとコンテンツが占める最小限の高さに行が調整され、grid-auto-rows: max-content;を指定するとコンテンツが改行せずに全て表示される高さに行が調整されます。さらに、grid-auto-rows: 1fr;のようにfr単位を使用すれば、利用可能なスペースを均等に分割する形で、暗黙的な行が生成されます。minmax(min, max)関数を用いることで、最小値と最大値の範囲内で柔軟に行のサイズを決定することも可能です。

このプロパティを活用することで、グリッドアイテムの追加や削除、コンテンツ量の変動によって、動的に行が生成されるようなレイアウトにおいて、その行のサイズを柔軟に制御し、予測可能なデザインを構築できます。grid-auto-columnsプロパティは自動生成される列のサイズを制御するもので、grid-auto-rowsとともに、より柔軟なグリッド設計を可能にします。

Copy
1.grid-container {
2  grid-auto-rows: 50px auto minmax(100px, 1fr);
3}

引数なし

引数はありません

戻り値なし

戻り値はありません