CSS3

プロパティ

grid-row-start、grid-column-start、grid-row-end、grid-column-end

→●、mdn（grid-row-start、grid-column-start、grid-row-end、grid-column-end）

格子アイテムの配置の開始／終了と幅。

<grid-line> ⤴

＝auto
| <custom-ident>
| [<integer> && <custom-ident>?]
| [span && [<integer> || <custom-ident>]]

［grid-row-start、grid-column-start、grid-row-end、grid-column-end］プロパティは、格子の中の格子アイテムのスパン数と所在を決定する。すなわち、アイテムの配置に［罫の位置やスパン数についての情報を供与するか、何も供与しない（自動的に配置させる）］ことを通して、アイテムが置かれる区画は どの罫を［行内始端、ブロック始端、行内終端、ブロック終端］辺とするかを指定する。

auto ⤴

プロパティは、格子アイテムの配置に何も供与しない。すなわち、［自動配置／既定のスパン数 1］のいずれかにすることを指示する（§ 格子アイテムの配置法 を見よ）。

<DIV style="border:1px solid black;
 display:grid;
 grid-template:50px 70px/40px 60px 80px;
">
 <SPAN style="border:1px solid black">1</SPAN>
 <SPAN style="grid-column-start:auto; border:1px solid red">2</SPAN>
 <SPAN style="border:1px solid black">3</SPAN>
 <SPAN style="border:1px solid black">4</SPAN>
</DIV>

1 2 3 4

<custom-ident> ⤴

識別子の指定。あらかじめ、格子コンテナ側で、grid-template、grid-template-areas でエリアを指定しておき、その中に記述されている名前と一致させる。

<DIV style="border:1px solid black; width:150px; height:150px;
 display:grid;
 grid-template-areas:	'a b c'
			'd e f'
			'g h i';
">
 <DIV style="grid-column-start:a; grid-column-end:b; border:1px solid red">１</DIV>
 <DIV style="grid-column-start:d; grid-column-end:d; grid-row-start:d; grid-row-end:g; border:1px solid red">２</DIV>
 <DIV style="grid-column-start:i; grid-row-start:i; border:1px solid red">３</DIV>
</DIV>

１

２

３

上の どの生成規則の <custom-ident> においても、キーワード span、auto は除外される。

<integer> && <custom-ident>? ⤴

N を <integer> に与えられた整数とする。<integer> のみ与えられた場合、N 本目の罫を格子アイテムの配置に供与する。N が負である場合、明示的な格子の終端辺から逆順に数える。

【N ＝［1／-1］が明示的な格子の［始端／終端］罫に対応する。結果の罫が明示的な格子の［終端辺／始端辺］を超える場合、暗黙的な罫を供与することになる。】

<custom-ident> として罫名も与えられた場合、その名前を伴う罫に限り数えられる（その名前を伴う罫のうち N 本目を供与する）。この目的においては、暗黙的な罫は、すべて その名前を伴うものと見なされる（したがって、明示的な格子内の該当する罫の本数が N に満たない場合、暗黙的な罫を供与することになる）。

<integer> に対する値 0 は、宣言を無効にする。

<DIV style="border:1px solid black;
 display:grid;
 grid-template:50px 70px 50px/[L] 40px [L] 60px [L] 80px [L];
">
 <DIV style="grid-column-start:2; border:1px solid red">1</DIV>
 <DIV style="grid-row-start:2; grid-column-start:2; grid-column-end:4; border:1px solid red">2</DIV>
 <DIV style="grid-row-start:3; grid-column-start:1; grid-column-end:L 3; border:1px solid red">3</DIV>
</DIV>

1

2

3

span && [<integer> || <custom-ident>] ⤴

N を <integer> に与えられた整数とする。<integer> のみ与えられた場合、スパン数として N を格子アイテムの配置に供与する。すなわち、［格子アイテムが占める区画の、このプロパティに対応する辺］を、その対辺†から N 本目††の所に位置させる。例えば grid-column-end に対する span 2 は、grid-column-start 罫から終端方向に在る 2 本目の罫を指示する。

<integer> が省略された場合の既定は 1 とする。負な整数や 0 は無効になる。

【† 対辺とは、このスパン数が grid-row-end に指定されているならば、grid-row-start から指定される罫を指す（"-end" と "-strat" を入れ替えても、あるいは "-row-" を "-column-" に置き換えても同様）。したがって［grid-row-start、grid-row-end］の両者に この形による値が与えられた場合、定義が循環するが、その場合の取り扱いは § 格子配置における競合の取り扱い に述べられる。】
【†† 対辺自身は 0 本目。例えば span 2 は“2 本の筋にスパンする”ことを表す。】
【対辺が指定されていない場合（auto）、それが指す罫は、自動配置アルゴリズムに従って決定される。】

<custom-ident> も与えられた場合、その名前を伴う罫に限り数えられる（そのような罫のうち N 本目を指すことになる）。この目的においては、暗黙的な罫のうち［明示的な格子の探索していく方向に対応する側に在るもの］は、すべて その名前を伴うものと見なされる（したがって、明示的な格子内の該当する罫の本数が N に満たない場合、暗黙的な罫を指すことになる）。

<DIV style="border:1px solid black;
 display:grid;
 grid-template:50px 70px/[L]40px [L] 60px [L] 80px [L];
">
 <DIV style="grid-column-start:span 2; border:1px solid red">1</DIV>
 <DIV style="grid-row-start:2; grid-column-start:span L 2; border:1px solid red">2</DIV>
</DIV>

1

2

¶Lが効かない

1 本の row と 8 本の column を有する格子があり、それを成す 9 本の column 罫は次のように命名されているとする：

このとき、次の各 宣言は、格子アイテムを index で指示される各罫の合間に配置する：

grid-column-start: 4; grid-column-end: auto;
/*  罫 4 〜 罫 5 （ 5 = 4 + 既定のスパン数） */

grid-column-start: auto; grid-column-end: 6;
/*  罫 5 〜 罫 6 （ 5 = 6 − 既定のスパン数） */

grid-column-start: C; grid-column-end: C -1;
/*  罫 3 〜 罫 9 （ 3 = 始端側から最初の C, 9 = 終端側から最初の C ） */

grid-column-start: C; grid-column-end: span C;
/*  罫 3 〜 罫 6 （ 6 = 3 から終端方向に在る次の C ） */

grid-column-start: span C; grid-column-end: C -1;
/*  罫 6 〜 罫 9 （ 6 = 9 から始端方向に在る次の C ） */

grid-column-start: span C; grid-column-end: span C;
/*  エラー： まず，始端, 終端とも span を指定しているので、終端に指定されたスパンは無視される。
　その結果、アイテムは自動配置され，命名された罫にはスパンし得ない。
　grid-column: span 1; と等価になる。 */

grid-column-start: 5; grid-column-end: C -1;
/*  罫 5 〜 罫 9 */

grid-column-start: 5; grid-column-end: span C;
/*  罫 5 〜 罫 6 （ 6 = 5 から終端方向に在る次の C ） */

grid-column-start: 8; grid-column-end: 8;
/*  エラー：罫 8 〜 罫 9 になる */

grid-column-start: B 2; grid-column-end: span 1;
/*  罫 5 〜 罫 6 （ 5 = 始端側から 2 個目の B, 6 = 5 + 1 ） */

テスト