# grid-template-columns: repeat

> グリッドで自動的に列数を調整する関数です。repeat(auto-fit, minmax(最小幅, 1fr))の形式で、コンテナ幅に応じて自動的にカラム数が変わるレスポンシブグリッドの実装に必須です。

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

## 構文

```css
grid-template-columns: repeat(auto-fit | auto-fill, <track-size>)
```

## Tailwindでは

- 任意値: `grid-cols-[repeat(auto-fit,minmax(120px,1fr))]`
- 補足: auto-fit / auto-fill 専用のユーティリティは無く、任意値で書く。頻出ならテーマにカスタム登録する。

## ブラウザ対応

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

## コード例

### 例1: 最小250pxでコンテナ幅に応じて列数を自動調整

```css
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
```

### 例2: 200px固定幅で可能な限り多くの列を作成

```css
grid-template-columns: repeat(auto-fill, 200px);
```

## TIPS

auto-fitは余った空間を埋める、auto-fillは空の列も作成する。

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

auto-fitとauto-fillの違いはAIも逆に説明しがちです: アイテムが少ないとき、auto-fitは空トラックを潰してアイテムを広げ、auto-fillは空トラックを残します。また定番のminmax(240px, 1fr)は、コンテナが240px未満になるとはみ出すため、minmax(min(240px, 100%), 1fr)としておくと小画面でも安全です（この防御はAIはまず出しません）。

## AIへの依頼文例

- メディアクエリなしのレスポンシブカードグリッドを、小画面ではみ出さない防御込み（minmax+min）で書いて
- auto-fitとauto-fillの違いを、アイテムが1個しかない場合の見え方で説明して

## 関連プロパティ

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