カード一覧は、スマホでは1列、PCでは2列や3列にしたい場面が多いUIです。
この記事では、CSS Gridとflexで作るレスポンシブなカード一覧を20パターンに分けて紹介します。auto-fit、minmax()、flex-wrap、高さ揃え、画像比率、スマホ対応まで、コピーしやすい形でまとめます。
1. auto-fitで自動折り返しするカード一覧
もっとも使いやすい基本形です。入る数だけ自動で列を作ります。
<div class="card-grid-auto">
<article>カード1</article>
<article>カード2</article>
<article>カード3</article>
</div>.card-grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.card-grid-auto article {
padding: 20px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
}カード一覧の基本は、この repeat(auto-fit, minmax()) から始めると便利です。
2. auto-fillで空の列も維持する
auto-fill は空の列も確保しやすい指定です。
.card-grid-fill {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}多くの場合は auto-fit が扱いやすいですが、空の列を保ちたいときは auto-fill も候補です。
3. スマホ1列・PC3列にする
列数をはっきり決めたい場合は、メディアクエリで切り替えます。
.card-grid-3 {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.card-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}列数を固定したい記事一覧や商品一覧に向いています。
4. スマホ1列・タブレット2列・PC4列
表示幅ごとに列数を段階的に増やす例です。
.card-grid-steps {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 640px) {
.card-grid-steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.card-grid-steps {
grid-template-columns: repeat(4, 1fr);
}
}商品数が多い一覧では、段階的な列数指定が使いやすいです。
5. flex-wrapで折り返すカード一覧
flexで作る場合は、flex-wrap を使います。
.card-flex-wrap {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.card-flex-wrap article {
flex: 1 1 260px;
}カードの高さや行の揃いを管理したい場合は、Gridの方がわかりやすいことが多いです。
6. カードの高さを揃える
Gridでは、同じ行のカードの高さが自然に揃いやすいです。
.card-grid-equal {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
align-items: stretch;
}
.card-grid-equal article {
display: grid;
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}カード単体を display: grid; にしておくと、中身の配置もしやすくなります。
7. ボタン位置を下に揃える
本文量が違うカードでも、ボタンを下に揃える例です。
.card-grid-button {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.card-grid-button article {
display: flex;
flex-direction: column;
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 8px;
}
.card-grid-button .button {
margin-top: auto;
}ボタンの見た目は、CSSボタンデザイン集 と分けて扱います。
8. 画像比率を揃えるカード一覧
画像付きカードでは、画像の比率を揃えると一覧が整います。
.card-grid-image {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.card-grid-image img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 8px 8px 0 0;
}画像サイズがバラバラでも、aspect-ratio と object-fit で見た目を揃えられます。
9. gapを画面幅に合わせて変える
余白を固定せず、画面幅に合わせて少し変えたい場合の例です。
.card-grid-gap {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(16px, 3vw, 32px);
}clamp() を使うと、最小・可変・最大の余白をまとめて指定できます。
10. 最大幅つきカード一覧
一覧全体を中央に置き、広がりすぎないようにする例です。
.card-grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
max-width: 1120px;
margin: 0 auto;
padding: 0 20px;
}ページ全体の余白とカード一覧の最大幅をそろえると、レイアウトが安定します。
11. 小さなカードをたくさん並べる
タグカードやカテゴリカードのような小さめのカード一覧です。
.card-grid-small {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.card-grid-small article {
padding: 14px;
background: #f8fafc;
border-radius: 8px;
}最小幅を小さくすると、1行に入るカード数が増えます。
12. 大きめカードをゆったり並べる
記事カードや実績カードを大きめに見せたい場合の例です。
.card-grid-large {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
}最小幅を大きくすると、1枚ずつのカードがゆったり見えます。
13. 最初のカードだけ大きくする
最新記事や注目記事を大きく見せたい場合の例です。
.card-grid-featured {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.card-grid-featured article:first-child {
grid-column: 1 / -1;
}
@media (max-width: 700px) {
.card-grid-featured {
grid-template-columns: 1fr;
}
}重要なカードだけを大きくすると、一覧にメリハリが出ます。
14. スマホでは横スクロールにするカード一覧
スマホでカードを横に流したい場合の例です。
.card-scroll-mobile {
display: grid;
grid-auto-columns: minmax(240px, 80%);
grid-auto-flow: column;
gap: 16px;
overflow-x: auto;
padding-bottom: 8px;
}
@media (min-width: 768px) {
.card-scroll-mobile {
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
overflow: visible;
}
}横スクロールは便利ですが、重要な情報が隠れすぎないようにします。
15. リスト表示からカード表示へ切り替える
スマホでは縦リスト、PCではカードグリッドにする例です。
.card-list-to-grid {
display: grid;
gap: 16px;
}
@media (min-width: 768px) {
.card-list-to-grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}スマホで1列にしておくと、長いタイトルでも読みやすくなります。
16. 商品カード一覧のグリッド
商品一覧向けに、カード幅を少し小さめにした例です。
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
}
.product-grid article {
min-width: 0;
}商品数が多い場合は、最小幅を小さめにすると一覧性が上がります。
17. カードが横にはみ出すときの対策
長い文字や画像でカード一覧が横にはみ出る場合の対策です。
.card-grid-overflow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.card-grid-overflow article {
min-width: 0;
}
.card-grid-overflow img {
max-width: 100%;
height: auto;
}
.card-grid-overflow h3 {
overflow-wrap: anywhere;
}min-width: 0; と文字の折り返し指定を入れると崩れにくくなります。
18. CSS変数で最小幅と余白を管理する
複数のカード一覧で使い回す場合は、変数にしておくと便利です。
.card-grid-variable {
--card-min: 240px;
--card-gap: 24px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--card-min), 1fr));
gap: var(--card-gap);
}ページごとに --card-min を変えるだけで、列数を調整できます。
19. カード単体の装飾を最小にした一覧
一覧レイアウトの確認用として、カード装飾を薄くした例です。
.card-grid-simple {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
.card-grid-simple article {
padding: 18px;
background: #f8fafc;
border-radius: 8px;
}カード単体のデザインは、CSSカードデザイン集 に分けると重複を避けられます。
20. レスポンシブカード一覧の最小テンプレート
最後に、まずコピーするならこの形です。
<div class="card-grid-template">
<article>カード1</article>
<article>カード2</article>
<article>カード3</article>
</div>.card-grid-template {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.card-grid-template article {
min-width: 0;
padding: 20px;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 8px;
}自動折り返し、余白、はみ出し対策を含んだ実用的なテンプレートです。
カード一覧が崩れる原因
- スマホでも固定の列数にしている
- 画像サイズや比率がバラバラになっている
- 長いタイトルが折り返されず幅を押し広げている
gapを考えずに幅を指定している- カード単体の高さを無理に固定している
まとめ
レスポンシブなカード一覧は、Gridの repeat(auto-fit, minmax()) を使うと少ないCSSで対応できます。
カード単体のデザインは CSSカードデザイン集、Gridの基本は CSS Gridの使い方 で補足すると、記事同士の役割が明確になります。