グリッドアイテムが占める列の範囲を指定する短縮プロパティです。grid-column-startとgrid-column-endを一括指定。
grid-column: <start-line> / <end-line>| col-span-2 | grid-column: span 2 / span 2 |
| col-span-full | grid-column: 1 / -1 |
| col-start-2 | grid-column-start: 2 |
一般形: col-span-{n} / col-start-{n}
grid-column: span 2;2列分の幅を占める
grid-column: 1 / 4;1列目から4列目まで
-1は最後の列を意味する。spanを使うと相対的な指定ができる。レスポンシブレイアウトで列数を変更しやすい。
終了位置は「その列の手前」を指す。1 / 3は1列目と2列目の2列分。列番号は1から始まる（0ではない）。
span構文（grid-column: span 2）と負の線番号（grid-column: 1 / -1で全幅）はグリッドの生産性を大きく上げますが、AIは負番号の便利さ（列数を知らなくても端まで届く）を活かさないことがあります。線番号は「線」であり「セル」ではない（1 / 3は2セル分）点の混乱も定番です。
カードグリッドで特定のカードだけ全幅にしたい。列数に依存しない書き方（負の線番号）で
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。