# レスポンシブカードグリッドのCSS実装

> メディアクエリなしで列数が自動調整されるカードグリッド。repeat(auto-fit, minmax())の1行がこのレシピの本体です。

- カテゴリ: レイアウトパターン
- URL: https://www.css-dictionary.com/recipes/responsive-card-grid/

## HTML

```html
<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
</div>
<p class="note">プレビュー枠の右下をドラッグして幅を変えると、列数が自動で変わります</p>
```

## CSS

```css
.grid {
  display: grid;
  /* 1列120px以上を確保できるだけ並べ、余りは均等に分配 */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.cell {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid #e2d8c2;
  border-radius: 8px;
  font-weight: 700;
  color: #8a6d3b;
}

.note {
  font-size: 12px;
  color: #8a7d63;
}
```

## 仕組みの解説

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) の意味は「1列あたり最低120pxを確保できる数だけ列を作り、余った幅は1frで均等に分ける」です。コンテナ幅が変わると列数が自動で増減するため、ブレークポイントの管理が不要になります。auto-fitは空の列を潰してカードを引き伸ばすのに対し、auto-fillは空列を残します（カードが少ないときに違いが出ます）。

## 実装のポイント

minmaxの最小値は「カードの内容が崩れない最小幅」を基準に決めます。小さすぎるとテキストが窮屈になります。

## AIに依頼するときの文例

メディアクエリを使わないレスポンシブなカードグリッドを作ってください。grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))を使い、auto-fitとauto-fillの違いも説明してください。

## 使っているプロパティ

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