レイアウト
grid-row
grid-row は、グリッドの項目に書いて、その項目をどの行に置くか、何行にまたがらせるかを指定します。grid-row-start と grid-row-end をまとめて書くショートハンドです。
構文
<grid-line> [ / <grid-line> ]?プレビュー
コード
.box {
display: grid;
grid-template-columns: 1fr 1fr;
}
.box > :nth-child(2) {
grid-row: span 2;
}コントロール
解説
値の書き方
書き方は grid-column と同じで、始まりの線と終わりの線を / で区切って書きます（grid-row: 1 / 3）。行の線は上から 1 番、2 番…と数えます。
auto：初期値です。項目は空いているマスに順に置かれ、1 行分の高さになります。- 線の番号：
2なら 2 番の線から始まる、2 行目に置きます。負の値は下（終わり）から数えます。0 番の線はありません。 span 2：何行にまたがるかを書きます。
このページのプレビューは、補助の宣言で display: grid と grid-template-columns: 1fr 1fr にして、2 列のマスに 4 つの項目を入れ、2 番目の項目だけに grid-row を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。行は書いていないので、項目の数と置き方に合わせて自動で作られます。
行を決めた項目は先に置かれる
行の番号を決めた項目は、ほかの項目より先に、その行の空いているいちばん左のマスに置かれます。1 / 3 にすると、2 の項目が 1 の項目より前の、1 列目に入ります。ほかの項目は、そのあと空いているマスに HTML の順で置かれます。
行を書いていない箱では
負の番号は、grid-template-rows で書いた行（明示したグリッド）の下端から数えます。このページのプレビューのように行を書いていない箱では、-1 は 1 番の線と同じになるので、1 / -1 と書いても 1 行分にしかなりません。全部の行にまたがらせたいときは、grid-template-rows で行を書いておくか、span で行の数を書きます。
このページで扱わない書き方
grid-template-rows で付けた線の名前は、このページのコントロールではまだ扱っていませんが、コードには書けます。grid-area で行と列をまとめて書けます。