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

grid-row-start プロパティ

 grid-row-start プロパティは、display:grid; が設定されたエレメントの子エレメント(グリッドアイテムともいう)の表示位置を指定する、または連結するプロパティです。
 grid-row-start プロパティは、行(横並び)単位の位置、上から何番目かを指定できます。

上から2番目に表示(Exampleを参照
grid-row-start: 2;

 連結方法は、値に"span 連結数"で指定します。

行方向に3マスを連結
grid-row-start: span 3;

 表示位置と連結数の指定値を並べてることはできません。

 grid-row-startgrid-row-end を一括指定するには grid-row プロパティを指定します。

ページ内 Index

構文(Syntax)

CSS

grid-row-start: [ auto | line-number | span n ];

DOM ( JavaScript )

値の取得
String = object.style.gridRowStart;
値の設定
object.style.gridRowStart="[ auto | line-number | span n ]";

値(Values)

Value摘要
auto初期値(default値)
line-number行方向の表示位置
span n行方向への連結数

備考(Remarks)

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

Example

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

 最下端部分の3つのアイテムグリッドのHTMLテキストを作成していないために表示されません。