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

grid-template-rowsプロパティ

 grid-template-rowsプロパティは、行(縦)方向の並び数やグリッドアイテムの幅を指定するプロパティです。

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

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

構文(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長さの単位
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

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