CSS grid-template-rows 属性

定義と使用方法

grid-template-rows はグリッドレイアウト内の行数（および高さ）を指定します。

値はスペースで区切られたリストで、各値は対応する行の高さを指定します。

参照もしてください：

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

CSS 参考マニュアル：grid-columns 属性

CSS 参考マニュアル：grid-template 属性

例

row-size（高さ）を指定します：

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

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

CSS 文法

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

属性値

値 説明
none サイズが設定されていません。必要に応じて行を作成します。
auto 行のサイズは、コンテナのサイズと行内のアイテムの内容のサイズに依存します。
max-content 行内の最大アイテムに基づいて各行のサイズを設定します。
min-content 行内の最小アイテムに基づいて各行のサイズを設定します。
length 行のサイズを設定するには、合法な長さ値を使用します。参照してください：長さ単位。

技術的詳細

デフォルト値： none
継承： いいえ
アニメーション作成： サポートされています。参照してください：アニメーション関連属性。
バージョン： CSS Grid Layout Module レベル1
JavaScript 文法： object.style.gridTemplateRows="50px 200px"

ブラウザのサポート

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

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