できない.dev

CSSでカードを自動で折り返して並べるには

grid-template-columns の repeat(auto-fit, minmax()) を使い、メディアクエリを書かずにカードを画面幅へ合わせて折り返す基本形を示す。
列数はコンテナの幅から自動で決まる。

未実行 CSS の構文と仕様で確認したもので、ブラウザでの描画確認はまだ行っていない。

公開: 更新:

プレビュー
<div class="card-grid">
  <div class="card">カード 1</div>
  <div class="card">カード 2</div>
  <div class="card">カード 3</div>
</div>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.card {
  padding: 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  font-family: system-ui;
}

repeat(auto-fit, minmax(160px, 1fr)) は「最低 160px を確保できるだけ列を作り、余った幅は各列へ均等に分配する」という指定である。
列数をメディアクエリで刻まずに済むため、コンテナの幅が変わってもレイアウトが壊れにくい。

つまずき

auto-fit と auto-fill は書き方が似ているが、要素が少ないときの挙動が違う。

  • auto-fit は余った列を潰し、既存の要素を引き伸ばす。
  • auto-fill は空の列をそのまま残すため、要素が広がらない。

カードを横幅いっぱいに見せたいなら auto-fit を選ぶ。

できる例: auto-fit（2 枚が伸びる）
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
  outline: 1px dashed #94a3b8;
}
.card {
  padding: 12px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
}
できる例: auto-fill（空の列が残る）
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  outline: 1px dashed #94a3b8;
}
.card {
  padding: 12px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
}

minmax の第2引数は 1fr のままにする

minmax(160px, 1fr) の 1fr を 200px のような固定値に変えると、列が伸びなくなって右側にだけ余白が残る。

最小幅だけを決めて、伸縮側は 1fr に任せるのがこの書き方の要点である。

できない例: 第 2 引数を固定値にする
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 120px));
  gap: 8px;
  outline: 1px dashed #94a3b8;
}
.card {
  padding: 12px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
}
できる例: 第 2 引数は 1fr のまま
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  outline: 1px dashed #94a3b8;
}
.card {
  padding: 12px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
}