備忘録的プログラミングリファレンス

grid-template-rows プロパティ

 grid-template-rows プロパティは、グリッドコンテナの子エレメント(グリッドアイテム)の数と高さを指定する CSS のプロパティです。 縦方向で上から順に、それぞれの高さを指定します。
 グリッドコンテナとは display:grid; を設定したエレメントのことです。 この grid-template-rows プロパティは display:grid; を設定したエレメントで機能します。

 グリッドアイテムの高さは、指定数分だけの高さをスペースで区切って指定します。指定した数分だけの行方向の高さが設定されます。

グリッドアイテムの高さを300px、auto、250pxで指定(Exampleを参照
.grid_container{
	display: grid;
	grid-template-rows: 300px auto 250px;
}

 横方向の並び数と高さを指定するには、grid-template-columns プロパティを使用します。
 grid-templateプロパティgrid-template-columns、grid-template-rowsを一括して指定することができます。

ページ内 Index

構文(Syntax)

CSS

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

DOM ( JavaScript )

値の取得
String = object.style.gridTemplateRows;
値の設定
object.style.gridTemplateRows="none | auto | max-content | min-content | length | initial | inherit";

値(Values)

 以下の値を行方向に並べたいグリッドアイテム数分だけ定義します。

Value摘要
none初期値(default値)
autoグリッドアイテムの高さを自動で
max-contentグリッドアイテムの高さをアイテム内のコンテンツの最大に合わせる
min-contentグリッドアイテムの高さをアイテム内のコンテンツの最小に合わせる
length行方向のグリッドアイテム数分だけ定義、CSS長さの単位fit-content() による指定も可
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none
継承(Inherited)No
CSS AnimationYes

Example

 grid-template-rowsプロパティの例です。 親エレメント<div id="over">に、grid-template-rowsプロパティで親エレメント上から高さ100px、200px、autoで指定しています。 コンテンツ4、5は指定していません。

縦横に整列させる例

 grid-template-columns と grid-template-rows プロパティを使って縦と横に整列させる方法です。

 この例では、6つのグリッドアイテムを横方向に3つ、縦に2つ並べます。
 そのために、grid-template-columns で3列、grid-template-rows で2行分を指定します。
 幅は均等に分けられるように全て auto で、高さはキレイにみえるように固定値を指定しています。