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

grid-auto-rows プロパティ

 grid-auto-rows プロパティは、グリッドコンテナの子エレメント(グリッドアイテム)の高さを指定するプロパティです。 grid-auto-rows プロパティの値は、全ての子エレメントに反映されます。
 グリッドコンテナとは、display:grid; が設定されたエレメントです。

グリッドアイテムの高さを全体の30%に指定(Exampleを参照
grid-auto-rows: 30%;

関連する CSS プロパティ

 以下は、grid-auto-rows プロパティに関連するプロパティです。

display:grid;並びを設定することができるdisplayプロパティ
grid-areaグリッドアイテムに名称を指定
grid-auto-columnsグリッドアイテムの幅
grid-auto-flowグリッドコンテナの領域を自動的に拡張
grid-auto-rows全てのグリッドアイテムの高さ
grid-columnグリッドアイテムの列単位の位置と連結数
grid-column-end列単位の位置や連結数
grid-column-gap列同士のギャップ幅
grid-column-start列単位(横)の位置や連結数
grid-gapグリッドアイテムどうしのギャップのサイズ
grid-row行単位の位置と連結数
grid-row-end行単位の位置や連結数
grid-row-gap行同士のギャップ幅
grid-row-start行単位の位置や連結
grid-templateグリッドアイテムの並び数やサイズ
grid-template-areasグリッドアイテムの配置や連結
grid-template-columnsグリッドアイテムの列の並び数、幅
grid-template-rowsグリッドアイテムの行の並び数と高さ

ページ内 Index

構文(Syntax)

CSS

grid-auto-rows: auto | max-content | min-content | minmax(a,b) | fit-content(length) | length ;

DOM ( JavaScript )

値の取得
String = object.style.gridAutoRows;
値の設定
object.style.gridAutoRows=" auto | max-content | min-content | minmax(a,b) | fit-content(length) | length ";

値(Values)

Value摘要
auto初期値(default値)
max-content最大サイズ
min-content最小サイズ
minmax(a,b)a以上b以下で自動調整
fit-content(length)最大lengthのサイズ
lengthCSS長さの単位

備考(Remarks)

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

Example

 grid-auto-rows プロパティの例です。
 親エレメント<div id="over">に、grid-template-columnsプロパティでグリッドアイテムを左から幅100px、200px、autoで指定しています。 コンテンツ4、5は指定していません。
 さらに、grid-auto-rows で高さ 100px に指定しています。全てのグリッドアイテムが同じ高さ 100px で反映されています。