【保存版】CSS Gridカードレイアウト完全ガイド｜auto-fit・minmaxでレスポンシブ対応する方法

3-1. 固定列数で指定するケース

もっとも基本的な指定方法は、次のように幅（または比率）を指定して列を並べる方法です。

.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列 */
}

1fr は「余白を含めた幅全体のうち1単位分（fraction: 分割）」という意味で、2つ並べると均等に左右へと配置されます。

3列にしたい場合は以下のように書けます。

grid-template-columns: 1fr 1fr 1fr; /* 3列 */

ただし、列数が増えるたびに毎回このように書くのは面倒です。そこで repeat() を使います。

3-2. repeat() の基本構文

grid-template-columns: repeat(3, 1fr); /* 1fr を3回繰り返す → 3列 */

repeat() は、同じ値を複数回繰り返すときに使います。次の2つは同じ意味になります。

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);

3-3. 固定幅とfrの違い

カード幅を固定したい場合は、px などの絶対値でも指定できます。

grid-template-columns: 300px 300px;

ただし、この方法では画面幅が300px×2より小さくなるとレイアウトが崩れてしまいます。
そこで fr や minmax() と組み合わせると、固定幅＋柔軟な伸び縮みが可能になります。

次の章では、Gridをさらに強力に使うために欠かせない minmax() と auto-fit を解説していきます。

4-1. minmax(最小値, 最大値) の意味

minmax() は、列の幅に「これ以上小さくしたくない最小値」と「これ以上大きくしなくてよい最大値」を指定できます。

minmax(300px, 1fr)

• 最小 300px：カードの幅が300pxより小さくならない
• 最大 1fr：余ったスペースがあれば広く使う

4-2. auto-fit とは何か？

repeat() の第1引数が、これまでの 2 や 3 のような具体的な数字ではなく、auto-fit になることで「カードを可能なだけ横に詰める」という動きになります。

repeat(auto-fit, minmax(300px, 1fr))

• 画面にカードが2枚入るなら2列
• 3枚入るなら3列
• 1枚しか入らない幅なら自動で1列

このように、画面幅に合わせてカード数を自動調整してくれます。

4-3. 実際のコード例

.card-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
}

このコードだけで、以下のような動作が実現されます。

つまり、メディアクエリを書かなくても、カードが自動的に折り返される ようになります。

5-1. 基本形：PC2列・スマホ1列

.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}

5-2. より柔軟なレイアウト：auto-fit + minmax

.card-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

画面幅によって自動的に1列〜4列に変化します。
300px × 2 以上の余白があれば2列に、900px以上なら3列、1200px以上なら4列にできます。

5-4. 自動レイアウト＋メディアクエリで安定感を高める

実務では「スマホだけは1列で固定したい」というケースも多くあります。
その場合、次のように組み合わせます。

.card-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

@media (max-width: 600px) {
  .card-list {
    grid-template-columns: 1fr;
  }
}