# justify-items

> グリッドコンテナ内のアイテムの水平方向（インライン軸）の配置を制御するプロパティです。全てのグリッドアイテムに対して一括で配置を指定できます。

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

## 構文

```css
justify-items: start | end | center | stretch
```

## Tailwindでは

- `justify-items-start` → justify-items: start
- `justify-items-center` → justify-items: center
- `justify-items-stretch` → justify-items: stretch

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 52+ / Firefox 20+ / Safari 9+ / Edge 12+

## コード例

### 例1: 各グリッドアイテムをセル内の中央に配置

```css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  justify-items: center;
}
```

### 例2: 各グリッドアイテムをセル内の左端に配置

```css
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: start;
}
```

### 例3: 各グリッドアイテムをセルの幅に合わせて伸縮（デフォルト）

```css
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 300px);
  justify-items: stretch;
}
```

### 例4: レスポンシブカードグリッドで各カードをセル内の右端に配置

```css
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  justify-items: end;
}
```

## TIPS

justify-selfは個別のアイテムに、justify-itemsは全アイテムに適用される。Flexboxのjustify-contentとは用途が異なるので注意。

## よくある間違い

Flexboxでは効果がない。グリッドでのみ有効。個別制御にはjustify-selfを使う。

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

justify-itemsはgrid（とブロックレイアウト）専用で、flexコンテナでは無効です。AIはflexに書いて「効かない」コードを出しがちで、flexで同じことをするなら子側のmargin-inline: autoやコンテナのjustify-contentを使います。

## AIへの依頼文例

- gridの各セル内でアイテムを左寄せ・中央・右寄せに出し分けたい。justify-itemsとjustify-selfで実装して

## 関連プロパティ

- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [justify-self](https://www.css-dictionary.com/property/justify-self.md)
- [place-items](https://www.css-dictionary.com/property/place-items.md)
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md)