# grid-template-columns

> グリッドコンテナの列のサイズと数を定義するプロパティです。px、%、fr（fractional unit）、auto、repeat()関数などで柔軟に指定できます。複雑な2次元レイアウトの基礎となります。

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

## 構文

```css
grid-template-columns: <track-size> ... | <line-name> <track-size> ...
```

## Tailwindでは

- `grid-cols-3` → grid-template-columns: repeat(3, minmax(0, 1fr))
- `grid-cols-none` → grid-template-columns: none
- 一般形: `grid-cols-{n}`
- 任意値: `grid-cols-[200px_1fr]`

## ブラウザ対応

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

## コード例

### 例1: 3つの等幅（同じ幅）の列を作成します。例えば3カラムのレイアウトや、カードを均等に並べたい時に使います。

```css
grid-template-columns: 1fr 1fr 1fr;
```

### 例2: 列の数を自動調整し、各列の最小幅を300px、最大幅を等分（1fr）にします。画面幅に応じてカラム数が増減するレスポンシブなグリッドが簡単に作れます。

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

## TIPS

repeat()とminmax()を組み合わせるとレスポンシブなグリッドが簡単に作れる。

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

repeat(auto-fit, minmax(240px, 1fr))のレスポンシブグリッドは定番ですが、AIはauto-fitとauto-fillの違い（アイテムが少ないとき広がるか空トラックを残すか）を逆に説明することがあります。また%とfrの違い（frはgapを引いた残りを分配）も混同されがちです。

## AIへの依頼文例

- メディアクエリなしで列数が自動調整されるカードグリッドをrepeat(auto-fit, minmax())で実装して
- auto-fitとauto-fillの違いを、このレイアウトでどちらを使うべきかの判断込みで説明して

## 関連プロパティ

- [display](https://www.css-dictionary.com/property/display.md)
- [gap](https://www.css-dictionary.com/property/gap.md)