# grid-row

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

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

## 構文

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

## Tailwindでは

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

## ブラウザ対応

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

## コード例

### 例1: 2行分の高さを占める

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

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

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

## TIPS

grid-columnと組み合わせて、複雑なレイアウトを実現。カード型レイアウトで特定のアイテムを大きく表示する際に便利。

## よくある間違い

終了位置は「その行の手前」を指す。行番号も1から始まる。

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

grid-columnと同じ線番号・span構文が行方向にも使えます。注意点は暗黙グリッド: 明示した行数を超える配置はgrid-auto-rowsのサイズで自動生成され、意図しない行高になりがちです。Pinterest風の段組はgrid-rowのspanとdense配置で近似できますが、真のMasonryは別仕様という区別もAIは曖昧にしがちです。

## AIへの依頼文例

- サイドバーを2行ぶち抜きにするレイアウトをgrid-rowのspanで実装して

## 関連プロパティ

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