# grid-column

> グリッドアイテムが占める列の範囲を指定する短縮プロパティです。grid-column-startとgrid-column-endを一括指定。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/grid-column/

## 構文

```css
grid-column: <start-line> / <end-line>
```

## Tailwindでは

- `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}`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 57+ / Firefox 52+ / Safari 10.1+ / Edge 16+

## コード例

### 例1: 2列分の幅を占める

```css
grid-column: span 2;
```

### 例2: 1列目から4列目まで

```css
grid-column: 1 / 4;
```

## TIPS

-1は最後の列を意味する。spanを使うと相対的な指定ができる。レスポンシブレイアウトで列数を変更しやすい。

## よくある間違い

終了位置は「その列の手前」を指す。1 / 3は1列目と2列目の2列分。列番号は1から始まる（0ではない）。

## AIがよく間違えるポイント

span構文（grid-column: span 2）と負の線番号（grid-column: 1 / -1で全幅）はグリッドの生産性を大きく上げますが、AIは負番号の便利さ（列数を知らなくても端まで届く）を活かさないことがあります。線番号は「線」であり「セル」ではない（1 / 3は2セル分）点の混乱も定番です。

## AIへの依頼文例

- カードグリッドで特定のカードだけ全幅にしたい。列数に依存しない書き方（負の線番号）で

## 関連プロパティ

- [grid-row](https://www.css-dictionary.com/property/grid-row.md)
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md)