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

grid-rowプロパティ

 grid-rowプロパティは、display:grid;によるエレメント(グリッドコンテナ)の子エレメント(グリッドアイテム)の行(横並び)単位の位置と連結数を指定するプロパティです。 grid-rowプロパティはグリッドアイテムに指定します。

 grid-rowプロパティによって以下のプロパティを一括して指定できます。

上からから2番めで行に2連結
grid-row: 2/span 2;

関連するプロパティ

 以下は関連するプロパティです。

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-end行単位の位置や連結数
grid-row-gap行同士のギャップ幅
grid-row-start行単位の位置や連結
grid-templateグリッドアイテムの並び数やサイズ
grid-template-areasグリッドアイテムの配置や連結
grid-template-columnsグリッドアイテムの列の並び数、幅
grid-template-rowsグリッドアイテムの行の並び数と高さ

構文(Syntax)

CSS

grid-row: grid-area-names | [ grid-row-start / grid-row-end ];

DOM(JavaScript)

値の取得
String = object.style.gridRow;
値の設定
object.style.gridRow=" grid-area-names | [ grid-row-start / grid-row-end ]";

値(Values)

Value摘要
grid-area-names領域名を定義
grid-row-start行(縦)の表示位置か、行(縦)への連結数
grid-row-end行(縦)の指定位置の1つ前に表示するか、行(縦)への連結数

備考(Remarks)

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

Example

 grid-rowの例です。 親エレメントのdisplay:grid;やdisplay-*プロパティによって9つに分割した領域で、contents01のgrid-row:2/span2;によって、contents01がcontents00の下に移動し、領域が2つ分確保されてています。 確保された分でcontents08がズレています。