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

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

静的確認

静的確認は、CSS の構文と仕様で確認し、ブラウザでの描画確認までは行っていないものである。

公開: 2026-07-29

プレビュー

<style>
.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;
}
</style>
<div class="card-grid">
  <div class="card">カード 1</div>
  <div class="card">カード 2</div>
  <div class="card">カード 3</div>
  <div class="card">カード 4</div>
</div>

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

つまずき

auto-fit と auto-fill は書き方が似ているが、要素が少ないときの挙動が違う。
auto-fit は余った列を潰して既存の要素を引き伸ばすのに対し、auto-fill は空の列をそのまま残すため要素が広がらない。
カードを横幅いっぱいに見せたいなら auto-fit を選ぶ。

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

minmax(160px, 1fr) の 1fr を 200px のような固定値に変えると、列が伸びなくなって右側にだけ余白が残る。
最小幅だけを決めて伸縮側は 1fr に任せるのが、この書き方の要点である。