グリッドアイテムが占める行の範囲を指定する短縮プロパティです。grid-row-startとgrid-row-endを一括指定。
grid-row: <start-line> / <end-line>| row-span-2 | grid-row: span 2 / span 2 |
| row-span-full | grid-row: 1 / -1 |
| row-start-1 | grid-row-start: 1 |
一般形: row-span-{n} / row-start-{n}
grid-row: span 2;2行分の高さを占める
grid-row: 1 / 4;1行目から4行目まで
grid-columnと組み合わせて、複雑なレイアウトを実現。カード型レイアウトで特定のアイテムを大きく表示する際に便利。
終了位置は「その行の手前」を指す。行番号も1から始まる。
grid-columnと同じ線番号・span構文が行方向にも使えます。注意点は暗黙グリッド: 明示した行数を超える配置はgrid-auto-rowsのサイズで自動生成され、意図しない行高になりがちです。Pinterest風の段組はgrid-rowのspanとdense配置で近似できますが、真のMasonryは別仕様という区別もAIは曖昧にしがちです。
サイドバーを2行ぶち抜きにするレイアウトをgrid-rowのspanで実装して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。