# place-items

> align-itemsとjustify-itemsを一括で設定するショートハンドプロパティです。Grid/Flexboxで中央配置が簡単になります。

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

## 構文

```css
place-items: <align-items> <justify-items>
```

## Tailwindでは

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

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 59+ / Firefox 45+ / Safari 11+ / Edge 79+

## コード例

### 例1: グリッドアイテムを中央配置

```css
.grid-container {
  display: grid;
  place-items: center;
}
```

### 例2: 垂直方向は開始、水平方向は終端に配置

```css
place-items: start end;
```

## TIPS

1つの値で両方向、2つの値で個別指定。中央配置の最短記法。

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

place-items: centerはgridの完全中央寄せ最短コード（align-items + justify-itemsの一括指定）ですが、AIはこれをflexコンテナに書くことがあります。flexにはjustify-itemsが存在しないため半分しか効きません（flexならalign-items + justify-content）。2値指定の順序はalign→justifyです。

## AIへの依頼文例

- display: grid; place-items: center の1行中央寄せと、flexでの中央寄せの使い分けを説明して実装して

## 関連プロパティ

- [align-items](https://www.css-dictionary.com/property/align-items.md)
- [justify-items](https://www.css-dictionary.com/property/justify-items.md)
- [place-content](https://www.css-dictionary.com/property/place-content.md)