CSS grid-auto-rows 属性

定義と使用方法

grid-auto-rows属性は、グリッドコンテナ内の行にサイズを設定します。

この属性は、サイズが設定されていない行にのみ影響を与えます。

また参照してください：

CSSチュートリアル：CSSグリッドレイアウト

CSSリファレンスマニュアル：grid-auto-columns属性

例

グリッド内の行のデフォルトサイズを設定する：

.grid-container {
  display: grid;
  grid-auto-rows: 150px;
}

自分で試してみてください

CSS文法

grid-auto-rows: auto|max-content|min-content|length;

属性値

値 説明
auto デフォルト値。行の中の最大プロジェクトのサイズに基づいて行のサイズが決定されます。
max-content 行の中の最大プロジェクトに基づいて各行のサイズを設定します。
min-content 行の中の最大プロジェクトに基づいて各行のサイズを設定します。
length 行のサイズを設定するには、合法な長さ値を使用します。参照してください：長さ単位。

技術的詳細

デフォルト値： auto
継承： いいえ
アニメーション作成： サポートしています。参照してください：アニメーション関連属性。
バージョン： CSS Gridレイアウトモジュールレベル1
JavaScript文法： object.style.gridAutoRows="60px"

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44